Styling the parent list with 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>

score 2 · Answer 1 · answered Jun 17 '13 at 08:20

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

score 2 · Answer 2 · edited May 23 '17 at 11:56

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?

edited May 23 '17 at 11:56

Community

1
1

answered Jun 17 '13 at 08:23

Code Lღver

15,573
16
56
75

score 0 · Answer 3 · answered Jun 17 '13 at 08:21

0

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

answered Jun 17 '13 at 08:21

cowls

24,013
8
48
78

score 0 · Answer 4 · answered Jun 17 '13 at 08:21

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

Styling the parent list with css

4 Answers4