使用css为父列表设置样式

Question

For the below list, i want to style the parent list only like ( first parent ) i tried to use :

  ul < li {
    background-color: yellow;
  }

put this doesn't work , how can i do that ?

    <ul>
  <li>first parent <!-- style this -->
    <ul>
      <li>second</li>
      <li>second</li>
      <li>second</li>
      <li>second</li>
      <li>second</li>
    </ul>
  </li>
  <li>first parent</li> <!-- style this -->
  <li>first parent</li> <!-- style this -->
  <li>first parent</li> <!-- style this -->
  <li>first parent</li> <!-- style this -->
</ul>

Answer 1

You can't target a parent in CSS. You should just add a class to it and use it that way.

<li class="highlight">

-

.highlight {
    background-color: yellow;
}

Or, designate that specific li by it's position in its parent.

li:nth-child(5) { /* assuming it's the 5th <li> in that list */
    background-color: yellow;
}

Answer 2

Let's be clear here, just in case someone is finding this from a search engine: there are no parent selectors in CSS , not even in CSS3.

check this tutorial .

Here is the discuss about it: Is there a CSS parent selector?

Answer 3

Hmm, you could use a class.

Or style both like this:

ul li { background-color: yellow; }
ul li ul li { background-color: none; }

Id probably use a class

Answer 4

you need to apply a class to identify your "first level" like this :

<ul class="firstLevel">
  <li>first parent <!-- style this -->
    <ul>
      <li>second</li>
      <li>second</li>
      <li>second</li>
      <li>second</li>
      <li>second</li>
    </ul>
  </li>
  <li>first parent</li> <!-- style this -->
  <li>first parent</li> <!-- style this -->
  <li>first parent</li> <!-- style this -->
  <li>first parent</li> <!-- style this -->
</ul>

Then apply css :

/* ">" means only first level childs "li" will be concerned */
ul.firstLevel > li { 
  background-color: yellow;
}