Best IT Recipes

CSS - Syntax for selecting a class within an identifier

What is the selection syntax for selecting a tag inside an identifier via a class name? For example, what do I need to choose below so that the inner "li" turns red?

<html> <head> <style type="text/css"> #navigation li { color: green; } #navigation li .navigationLevel2 { color: red; } </style> </head> <body> <ul id="navigation"> <li>Level 1 item <ul class="navigationLevel2"> <li>Level 2 item</li> </ul> </li> </ul> </body> </html>
+54
css css-selectors
Jul 16 '09 at 22:23
source share
4 answers
 #navigation .navigationLevel2 li { color: #f00; }
+64
Jul 16 '09 at 10:25
source share

This will also work, and you don't need an extra class:

 #navigation li li {}

If you have a third LI level, you may need to reset / override some styles that they inherit from the selector above. You can target level three as follows:

 #navigation li li li {}
+5
Jul 16 '09 at 22:39
source share
 .navigationLevel2 li { color: #aa0000 }
+1
Jul 16 '09 at 22:24
source share

There are two options. I prefer the navigationAlt parameter, because in the end it works less:

 <html> <head> <style type="text/css"> #navigation li { color: green; } #navigation li .navigationLevel2 { color: red; } #navigationAlt { color: green; } #navigationAlt ul { color: red; } </style> </head> <body> <ul id="navigation"> <li>Level 1 item <ul> <li class="navigationLevel2">Level 2 item</li> </ul> </li> </ul> <ul id="navigationAlt"> <li>Level 1 item <ul> <li>Level 2 item</li> </ul> </li> </ul> </body> </html>
0
Jul 16 '09 at 22:30
source share


More articles:


All Articles