CODEWITHSUNDEEP
htmlcss
pete
pete

Reputation: 19

List items CSS styles

Can someone tell me what the following selector does? (the menu can be found below)

   ul.nav li ul {
      width: 8em;
      position: absolute;
      left: −999em;
    }

Does this mean:

1) select all unordered list with a class nav and target both li and ul ??

<ul class="nav">
  <li><a href="/home/">Home</a></li>
  <li><a href="/products/">Products</a>
    <ul>
      <li><a href="/products/silverback/">Silverback</a></li>
      <li><a href="/products/fontdeck/">Font Deck</a></li>
    </ul>
  </li>


<li><a href="/services/">Services</a>
    <ul>
      <li><a href="/services/design/">Design</a></li>
      <li><a href="/services/development/">Development</a></li>
      <li><a href="/services/consultancy/">Consultancy</a></li>
    </ul>
  </li>
  <li><a href="/contact/">Contact Us</a></li>
</ul>

Many thanks, Pete

Upvotes: 0

Views: 41

Answers (5)

brentonstrine
brentonstrine

Reputation: 22732

Selectors are read backwards (right to left).

ul.nav li ul {}

Will apply to any:

  • ul
  • which is inside of an li
  • which is inside of an ul that also has class nav

In the HTML below, the ul with id=ThisOne would be selected: 

<ul class="nav">
  <li>
    Services
    <ul id="ThisOne">
      <li>Design</li>
      <li>Development</li>
      <li>Consultancy</li>
    </ul>
  </li>
</ul>

Upvotes: 0

jbg
jbg

Reputation: 476

The CSS basically put the 1st nested unordered list elements (ul tags) out of the document flow (position: absolute) & moves them off the page so no one sees them (left: -999em).

Upvotes: 0

Davide Scanu
Davide Scanu

Reputation: 62

 ul.nav li ul

It means: "select ALL ul from ALL li inside a <ul class="nav">"

This code will select:

<ul>
      <li><a href="/products/silverback/">Silverback</a></li>
      <li><a href="/products/fontdeck/">Font Deck</a></li>
</ul>

and

<ul>
      <li><a href="/services/design/">Design</a></li>
      <li><a href="/services/development/">Development</a></li>
      <li><a href="/services/consultancy/">Consultancy</a></li>
</ul>

Upvotes: 0

user2752467
user2752467

Reputation: 844

It selects all uls that are descendants of lis that are themselves descendants of uls with the class nav.

Upvotes: 0

Taryn East
Taryn East

Reputation: 27747

select all ULs from any li inside a ul with the class "nav"

"1) select all unordered list with a class nav and target both li and ul ??"

nup selectors aren't additive (so they won't select both li and ul) - they're like a path through a tree structure.

Read it like a "breadcrumb"...

The first ul.nav says we're cutting down the whole html-document to only look at uls with the "nav" class on them...

Then the li after that says that we don't actually care about that ul.nav we're only looking at any li tags inside of them.

The final ul means that we don't care about the li tags either, we only care about a ul inside of any of those li tags

Upvotes: 2

Related Questions