CSS Argument for "If First Child Is"

CSS argument for if first child is

As your title implies "if first child is": div > .test:first-child will select the first child of any <div> if it has the class test.

But if the first child of the <div> doesn't have the class test, then it won't continue searching the <div> until it finds a child with the class test — it just won't match anything. I'm not sure if that's what you want.

How can I use first of type or first child to target only the top level one. Not the nested one?

You won't be able to use :first-of-type or :first-child to target only the top level one and ignore the nested one.

Both these pseudo css selectors checks child for immediate parent.

For example, :first-of-type works as:

And :first-child works as:

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 + Not Selectors?

CSS only approach

First child does not work that way. You can read more about it in BoltClock's answer here. It selects the first-child of the parent (that also matches any additional conditions) and cannot select the first element among the children which match the provided condition.

Instead what you could do is first apply the required properties on all li:not(.hidden) elements and then override it with default settings for li:not(.hidden) ~ li:not(.hidden). The second selector means that any .hidden element which is a sibling of another (meaning it is not the first) would get the default setting whereas the first would get the modified setting (red color in the snippet).

The general sibling selector should be used as the adjacent sibling selector (+) may not help you completely because as you can see in the below snippet, it would only select all other elements as long as there is no other .hidden in between.

ul > li:not(.hidden) {  color: red;}ul#one > li:not(.hidden) ~ li:not(.hidden) {  color: black;}ul#two > li:not(.hidden) + li:not(.hidden) { /* wont help if any other hidden elements in between */  color: black;}

<ul id='one'>  <li class="hidden">First hidden</li>  <li class="hidden">Second hidden</li>  <li>First not hidden</li>  <li>Second not hidden</li>  <li class="hidden">Third hidden</li>  <li>Third not hidden</li></ul>
<ul id='two'>  <li class="hidden">First hidden</li>  <li class="hidden">Second hidden</li>  <li>First not hidden</li>  <li>Second not hidden</li>  <li class="hidden">Third hidden</li>  <li>Third not hidden</li></ul>

first-child not selecting the first of its type

There is no element that has that class and is the first child. If you want the first element with that class, use .portfolio:first-of-type.

Is there a functional difference between *:first-child and :first-child?

They are identical even if we consider performance. From the specification we can read

If a universal selector represented by * (i.e. without a namespace prefix) is not the only component of a sequence of simple selectors selectors or is immediately followed by a pseudo-element, then the * may be omitted and the universal selector's presence implied.

So writing > :first-child should mean the same as > *:first-child for the browser.

You can also read

Note: it is recommended that the * not be omitted, because it decreases the potential confusion between, for example, div :first-child and div:first-child. Here, div *:first-child is more readable.

So it's not only a matter of preference but it helps avoid confusion and make the code more readable.

---

In the new sepcification we can also read:

Unless an element is featureless, the presence of a universal selector has no effect on whether the element matches the selector.

and

Note: In some cases, adding a universal selector can make a selector easier to read, even though it has no effect on the matching behavior. For example, div :first-child and div:first-child are somewhat difficult to tell apart at a quick glance, but writing the former as div *:first-child makes the difference obvious.

: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.

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.

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.

Select last child except if it is also first child

You can use it together with :not() selector.

CSS pseudo-class :not(X) is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument.

li:last-child:not(:first-child) {  color: red;}

<ul>  <li>item a</li>  <li>item b</li>  <li>item c</li></ul>
<ul>  <li>only item</li></ul>

how to only target a css class if it is the first element within the body tag?

You can target an element as direct child of the body only if it's both the first-child and with a specific class name

body > .yourclass:first-child {
   ...
}

:first-child matches a specific element, regardless of its class name but in this case the class must be also chained. All other elements with that class name won't be styled.

---

Codepen demo

---

Related Topics