CSS Selector: First-Child

Is there a CSS selector for the first direct child only?

What you posted literally means "Find any divs that are inside of section divs and are the first child of their parent." The sub contains one tag that matches that description.

It is unclear to me whether you want both children of the main div or not. If so, use this:

div.section > div

If you only want the header, use this:

div.section > div:first-child

Using the > changes the description to: "Find any divs that are the direct descendents of section divs" which is what you want.

Please note that all major browsers support this method, except IE6. If IE6 support is mission-critical, you will have to add classes to the child divs and use that, instead. Otherwise, it's not worth caring about.

Combining CSS Selectors with :first-child

You're missing a space. You want the span that's the first child, not the div that's the first child.

Finds the first span:

#messages > div :first-child

Finds the first div:

#messages > div:first-child

CSS selector for first element with class

This is one of the most well-known examples of authors misunderstanding how :first-child works. Introduced in CSS2, the :first-child pseudo-class represents the very first child of its parent. That's it. There's a very common misconception that it picks up whichever child element is the first to match the conditions specified by the rest of the compound selector. Due to the way selectors work (see here for an explanation), that is simply not true.

Selectors level 3 introduces a :first-of-type pseudo-class, which represents the first element among siblings of its element type. This answer explains, with illustrations, the difference between :first-child and :first-of-type. However, as with :first-child, it does not look at any other conditions or attributes. In HTML, the element type is represented by the tag name. In the question, that type is p.

Unfortunately, there is no similar :first-of-class pseudo-class for matching the first child element of a given class. At the time this answer was first posted, the newly published FPWD of Selectors level 4 introduced an :nth-match() pseudo-class, designed around existing selector mechanics as I mentioned in the first paragraph by adding a selector-list argument, through which you can supply the rest of the compound selector to get the desired filtering behavior. In recent years this functionality was subsumed into :nth-child() itself, with the selector list appearing as an optional second argument, to simplify things as well as averting the false impression that :nth-match() matched across the entire document (see the final note below).

While we await cross-browser support (seriously, it's been nearly 10 years, and there has only been a single implementation for the last 5 of those years), one workaround that Lea Verou and I developed independently (she did it first!) is to first apply your desired styles to all your elements with that class:

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

... then "undo" the styles for elements with the class that come after the first one, using the general sibling combinator ~ in an overriding rule:

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

Now only the first element with class="red" will have a border.

Here's an illustration of how the rules are applied:

.home > .red {
    border: 1px solid red;
}

.home > .red ~ .red {
    border: none;
}

<div class="home">
  <span>blah</span>         <!-- [1] -->
  <p class="red">first</p>  <!-- [2] -->
  <p class="red">second</p> <!-- [3] -->
  <p class="red">third</p>  <!-- [3] -->
  <p class="red">fourth</p> <!-- [3] -->
</div>

Is the CSS ID selector with first-child pseudo syntax correct using a space?

Using a space (blank) between or not is a semantic difference, it controls on what set of elements that additional selector is actually applied on:

#myDiv:first-child:
no separating blank means you try to filter the set of elements with the id "myDiv". This obviously makes no sense but is semantically valid.
#myDiv :first-child:
a separating blank means you select out of all elements inside the selected div, so child elements. Note that this does not only match immediate children though, but also children further down the hierarchy.
#myDiv > :first-child:
a separating "greater than" (arrow) means you select out of all immediate child elements of the selected div. Sp this does not match elements further down the hierarchy.

Cannot select first child in css

The :first-child selector only selects the first child of its parent regardless of type. Your <p> is the third child of its <div> parent. To select the first child of a given type, use the :first-of-type instead:

div p:first-of-type {  border-left: 5px solid #bdc3c7;}

<div>  <h3>1 January 2018</h3>  <h1>This is my first Article</h1>  <p>First</p>  <p>Second</p>  <p>Third</p></div>

CSS First Child when 7 or more children

You can select the first element when there are 7 or more elements by using the below selector:

div:first-child:nth-last-child(n+7) {
  color: red;
}

Explanation:

nth-last-child(n+7) - Will select all but the last seven child elements. When there are less than seven children, this will match none.
:first-child:nth-last-child(n+7) - Will select only the element which is also the first child among the elements which match the other part (which is, select only first child when there are seven or more children)

.container > div:first-child:nth-last-child(n+7) {  color: red;}

<h3>Has seven children</h3><div class='container'>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div></div>
<h3>Has six children</h3><div class='container'>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div></div>
<h3>Has nine children</h3><div class='container'>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div>  <div>Test</div></div>

CSS select first child if it's a certain tag

figure:first-child will select all the figures that are first child of a parent.

Check this example at W3C.

Does :first-child work whether the type is known or unknown?

:first-child can be used with or without knowing the element type.

You can either do parent > :first-child to match any first child, whatever node type it is, or you can do parent > p:first-child to only match the first child if it's a p tag.

You can also do parent > p:first-of-type to match the first p inside parent, even if it isn't the first child.

CSS :first-child and :first-of-type (example)

Here's a great explanation on CSS Tricks. Basically, the first child of the #blog div is not an article element; it's a header element. :first-child will match an element if it's the first element in the parent container. :first-of-type will match an element if it's the first element of its type in the parent container regardless of whether or not there are other elements preceding it.