CODEWITHSUNDEEP
csscss-selectors
Idham Perdameian
Idham Perdameian

Reputation: 2277

CSS :not(li>:first-child) selector

I have a list of elements:

<ul>
  <li>Coca Cola</li>
  <li>Tea</li>
  <li>Coffee
    <ul>
      <li>White Coffee</li>
      <li>Black Coffee</li>
      <li>Coffee Low Caffein</li>
    </ul>
  </li>
</ul>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

I want to style like this:

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

ul li>:first-child
{
    color:blue;
}

Here is my jsfiddle, but it's not working with selector ul li:not(li>:first-child). I want a final result like this fiddle, any ideas?

Upvotes: 2

Views: 1781

Answers (3)

Bjorn
Bjorn

Reputation: 904

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

ul li:first-child
{
    color:blue;
}

Upvotes: 0

Robin Maben
Robin Maben

Reputation: 23064

<ul id="first">

For first level of li

ul > li
{
    color:red;
}

For any other li thereafter..

ul#first > li li
{
    color:blue;
}

Updated fiddle here.

Upvotes: 1

seemly
seemly

Reputation: 1090

I'm a bit confused, but in cases where I want a first-child to have a different style, I actually give it's siblings the desired alternative style:

li {
  color:#00f;
}
li + li {
  color:#f00;
}

Upvotes: 0

Related Questions