Selecting first-child after selecting element with not selector

Question

I am facing one issue. In which I want to select all the folders element that are not having class 'test' and after that I want to skip the first-child (in the result of all the elements that are not having class test). I created one fiddle Fiddle link

In which I am trying to set the background color for all the folder element that doesn't have test class and its not a first-child also.

So I first I tried setting background color for all the element that are not having test class.

folder:not(.test) {
  background-color:yellow;
}

And then I added this CSS for skipping first-child element's background color that doesn't have test class.

folder:not(.test):first-child{
  background-color:initial;
}

But this does not work!!!. In the fiddle only last 3 row should have background color as yellow. But currently 4th row is also having yellow background. Any help will be much appreciated.

Note : I am looking for CSS only solution.

Harry · Accepted Answer · 2017-02-17T11:45:14.267

2

Use the general sibling selector (~) for this purpose. This selector would select all folder elements that do not have the class='test' and also have atleast one previous sibling of the same type. Since it needs to have atleast one previous sibling that is folder:not(.test), the first folder element that doesn't have class='test' will not be selected.

folder:not(.test) ~ folder:not(.test) {
  background-color: yellow;
}

folder:not(.test) ~ folder:not(.test) {
  background-color: yellow;
}

<folder class="test">
  1.)This is test folder
</folder><br>
<folder class="test">
  2.)this is test folder
</folder><br>
<folder class="test">
  3.)this is test folder
</folder><br>
<folder>
  4.)first:level: this is not test folder
</folder><br>
<folder>
  5.)This is not test folder
</folder><br>
<folder>
  6.)This is not test folder
</folder><br>
<folder>
  7.)This is not test folder
</folder><br>

The following selector will select only the element that is the first child of its parent when that element also satisfies the other two conditions - that is, the element type is folder and class is not test.

folder:not(.test):first-child

In your code the first child (all elements here are children of body as there is no other container tag) is an element that has class='test' and so the above selector does not match any element.

edited Feb 17 '17 at 11:45

answered Feb 17 '17 at 11:39

Harry

87,580
25
202
214

Sounds great Harry!. I am somewhat new to css3. Bdw I edited the fiddle now the text are coming inside
tags. I also manipulated the css. But that just don't work. This is my updated fiddle [link](https://jsfiddle.net/ewvuzxg0/)
– Bharat Sewani Feb 17 '17 at 12:00
@BharatSewani: Just use `folder:not(.test) ~ folder:not(.test) p` like [here](https://jsfiddle.net/ewvuzxg0/1/). When you do it this way you are selecting the `p` element which is the child of a `folder:not(.test)` element that has a previous sibling of same type. But when you do `folder:not(.test) p ~ folder:not(.test) p`, it will try to select a `p` element which is the child of `folder:not(.test)` which in turn is a sibling of a `p` element (see the order in the selector). Our `folder` is not a sibling of any `p` and so no element is colored in your fiddle. – Harry Feb 17 '17 at 12:02
Thanks man!!! but I was little worried when I have to skip first two or more elements. Is that possible? – Bharat Sewani Feb 17 '17 at 12:10
@BharatSewani: You can't keep changing the question. I think your original question is answered and so you should mark the answer as "accepted" by clicking the hollow tick mark and ask a separate question if you have a new one. – Harry Feb 17 '17 at 12:12

score 2 · Answer 2 · edited May 23 '17 at 12:34

Bharat,

CSS is declarative and non procedural, then you can't combine "not" and "first-child" (or "nth-of-type"). More information here : Combining :nth-of-type() and :not

But you can easily use tilde "~" https://www.w3.org/TR/selectors/#general-sibling-combinators

The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

You should try :

folder:not(.test) ~ folder:not(.test) {
  background-color: yellow;
}

Orb

Selecting first-child after selecting element with not selector

2 Answers2