Why Doesn't This CSS :First-Child Selector Work

Why doesn't this CSS :first-child selector work?

fieldset > div:first-child means "select the first child element of a fieldset if it's a div".

It does not mean "select the first div in the fieldset".

The first child in this case is <input type="hidden" value="2">.

To select that div without changing the HTML, you need to use fieldset > div:first-of-type.

Unfortunately, while :first-child is widely supported, :first-of-type only works in IE9+ and other modern browsers.

So, in this case, the best fix is to continue using fieldset > div:first-child, and simply move <input type="hidden" value="2"> so that's it's not the first child.

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?

Doesn't CSS first-child or last-child work with class wise?

As others have mentioned, :first-child is working as expected, as the first child of the parent.

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

Source: CSS :first-child Selector

You can reach the first .blue like this:

.red + .blue

or if you want to get all the .blue after .red

.red ~ .blue

You might want to use :first-of-type which selects the first of a type but then those .blue would have to be a different HTML element.

div.red:first-of-type {

    color:#F00;

}

div.red:last-of-type {

    color:#00F;

}

p.blue:first-of-type {

    color:#F00;

}

p.blue:last-of-type {

    color:#00F; 

}

<div>

    <div class="red">one</div>

    <div class="red">two</div>

    <div class="red">three</div>

    <p class="blue">one</p>

    <p class="blue">two</p>

    <p class="blue">three</p>

</div>

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 doesn't work on my li

You could change it in two ways:

A) Use it on the li (as now) but use first-of-type

B) Nest the li's in an ul class="example" (which you are supposed to do) and do

.example:first-child{
    border-top: none !important;
}

(Your example edited: http://plnkr.co/edit/QTlaDQPXfdg3W6oNYex4?p=preview)

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;
}

not:first-child selector

One of the versions you posted actually works for all modern browsers (where CSS selectors level 3 are supported):

div ul:not(:first-child) {
    background-color: #900;
}

If you need to support legacy browsers, or if you are hindered by the :not selector's limitation (it only accepts a simple selector as an argument) then you can use another technique:

Define a rule that has greater scope than what you intend and then "revoke" it conditionally, limiting its scope to what you do intend:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

When limiting the scope use the default value for each CSS attribute that you are setting.

first-child selector is not working with dd

You should use :first-of-type pseudo-class instead.

dd:first-of-type {
    background-color: gold;
}

UPDATED DEMO.

That's because <dd> is not the first child of its parent.

element:first-child represents the first child of its parent, matching the element. And in this particular instance, the first child of <dl> element is a <dt> element; Not a <dl>.

From the MDN:

The :first-of-type CSS pseudo-class represents the first sibling of
its type in the list of children of its parent element.

Which the term of type refers to the HTML element type. Hence dd:first-of-type selects the first <dd> element in the children tree of its parent.

Alternatively, In this particular case you could select the first <dd> element by using adjacent sibling selector as: dt + dd. (Demo).

:last-child works, :first-child doesn't

You cannot use :first-child psuedo class since .sku is not the first child. A better option is to use either :first-of-type (for first child) or :nth-of-type (which can accept a number or an equation) pseudo classes:

.sku:nth-of-type(1) {
    display: none;
}

Updated Demo

---

Related Topics