CODEWITHSUNDEEP
css
Mona Coder
Mona Coder

Reputation: 6316

How to apply different style for nested child list

I am working on this demo. How can I apply different style to my nested list (>Nested 1. and >Nested 2) rather than its parent list?

<div>
  <ul>
    <li><a href="#">Zurich</a></li>
    <li><a href="#">Geneva</a>
       <ul>
         <li><a href="#">Nested 1</a></li>
         <li><a href="#">Nested 2</a></li>
       </ul>
     </li>
    <li><a href="#">Winterthur</a></li>
    <li><a href="#">Lausanne</a></li>
    <li><a href="#">Lucerne</a></li>
  </ul>
</div>

Upvotes: 0

Views: 159

Answers (2)

Zack
Zack

Reputation: 2869

I would achieve this through classes added to the <ul> elements, then use the appropriate css selector to apply the style.

Add the class to the <ul> tag you want to style.

<div>
  <ul>
    <li><a href="#">Zurich</a></li>
    <li><a href="#">Geneva</a>
       <ul class="styledList">
         <li><a href="#">Nested 1</a></li>
         <li><a href="#">Nested 2</a></li>
       </ul>
     </li>
    <li><a href="#">Winterthur</a></li>
    <li><a href="#">Lausanne</a></li>
    <li><a href="#">Lucerne</a></li>
  </ul>
</div>

Then, in the css sheet, apply styling to that class name, or just to the <li> elements within that list, whatever is appropriate.

Apply to <ul> and all decendants

.styledList {
  // css style
}

Apply only to <li> inside the <ul>

.styledList li {
  // css style
}

The . in the selector is used to specify that the style is applied to the elements with that class, or you can use the # selector to specify an ID that you want the style applied to, such as 

<div id="styledDiv">Hello</div>

css

#styledDiv {
  border: 1px solid black;
}

If you want to learn more about CSS selectors, you can check out the W3 article http://www.w3.org/TR/CSS2/selector.html and here is the class selectors in particular http://www.w3.org/TR/CSS2/selector.html#class-html

Upvotes: 0

j08691
j08691

Reputation: 207861

You can use li li a to select those elements. For example:

li li a {
    color:red;
}

jsFiddle example

Upvotes: 1

Related Questions