First-Child Not Working

:first-child not working as expected

The h1:first-child selector means

Select the first child of its parent

if and only if it's an h1 element.

The :first-child of the container here is the ul, and as such cannot satisfy h1:first-child.

There is CSS3's :first-of-type for your case:

.detail_container h1:first-of-type
{
    color: blue;
}

But with browser compatibility woes and whatnot, you're better off giving the first h1 a class, then targeting that class:

.detail_container h1.first
{
    color: blue;
}

:not(:first-child) and :not(:first-of-type) not working

That's because they are not siblings.

If you change the :not selector to the parent div, it will work.

.someContainer:not(:first-of-type)
{
    margin-top: 50px;
}

#someDivID{    width: 400px;}
#someItem,#someItem2{    border: 1px solid #000;    padding: 1px;    margin-bottom: 2px;    clear: both;    overflow: auto;}
.someContainer{    background-color: #0077FF;}
.someContainer:not(:first-of-type){    margin-top: 50px;}

<div id="someDivID">    <div class="theBody">        <div class="someContainer">            <div id="someItem" class="someItemClass">                Test            </div>        </div>        <div class="someContainer">            <div id="someItem2" class="someItemClass">                Test2            </div>        </div>    </div></div>

CSS first-child not working

The :first-child pseudo class, like all other :nth-child()-related pseudo-classes counts all siblings (i.e., elements having the same parent). Classes are ignored, as they have nothing to do with the DOM structure.

So :first-child is always the first sibling.

This...

ul li.has-item:first-child {
  font-size:8px
}

doesn't work because .has-item doesn't represent the :first-child of anything. The first child will always be <li>one</li>.

Related: Why is nth-child selector not working?

:first-child not working unless the parent is div

If you inspect your DOM, it turns out that there are an additional 3 elements being added inside the <body> tag, by the browser. the :first-child operator will only work IF the element being targeted is an <article> AND the first child of its parent. This is not the case, since the <first-child> is actually the <meta> tag. This is why your logic is failing when you remove the div.

Description

To make it work without the <div>, you could update your CSS styles to something like this:

  article:nth-child(4) {
    background-color: red;
  }

  article:nth-child(5) {
    background-color: yellow;
  }

  article:nth-child(6) {
    background-color: blue;
  }

  article:nth-child(7) {
    background-color: green;
  }

I would personally recommend to use a wrapping <div>, since it keeps both your HTML and the corresponding CSS organized. Also, the ordering of the extra tags added by the browser may vary across different browsers, so the above setup is not guaranteed to work across every browser. Using a <div> will guarantee it, since your <article> tags will always be the only children of the wrapping div.

Why :first-child selector not working on div?

The :first-child and :last-child pseudo-classes select the element that is the first/last child of the parent, filtered by any other chained selector, so div:first-child does not actually match anything as the first child within .blurbs is not a div.

What you need to use to get the effect you are after is the :first-of-type pseudo-class like this:

.news .blurbs div:first-of-type{
    outline: 1px solid red;
    height: 260px;
    overflow: auto;
    margin-bottom: 10px;
}

here is a working example

first-child not working

:first-child only selects the first child of its parent. Nothing else.

As mentioned in a few of my other answers on the site (1 2 3 4), there is no :first-of-class pseudo-class. If you are looking to apply styles to the first of each class of your div elements, a solution is to apply the styles to all children of that class, and a general sibling selector to undo the styles from subsequent siblings.

Your CSS would then look like this:

.project.work:before {
    content: 'Work';
}

.project.research:before {
    content: 'Research';
}

.project.work ~ .project.work:before, 
.project.research ~ .project.research:before {
    content: none;
}

:first-child and :nth-child(1) not working

The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

The correct selector is .contacts p:first-child

If you wanted it to work only based on the container and not know or care what it contains you could use .contacts > *:first-child

When you use it as you are on the container what you are actually asking for via css is an element with the class .contacts that is the first child among it's sibling elements.

:last-child style working, :first-child style not working! Why?

p:first-child does not work because the h1 element is the first child of its corresponding parent element; the p elements are the second, third and fourth child elements. Use p:first-of-type instead to only select the first element of the type p.

:last-child OR :first-child NOT WORKING if followed by any element

You fail to understand how those selectors are meant to work, and do work.

:first-child and :last-child are conditions which must match on their own. Preceding it with a selector like p or span just further constrains the list of elements already matched by :first-child and :last-child.

So p:first-child actually means Find all elements which are the first child elements of their parent; then from those found, give me only the p elements.