Menu
What is the selector syntax to select a tag within an id via the class name? For example, what do I need to select below in order to make the inner "li" turn 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> 
252
class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class.
Your HTML there is fine. You can specify a class and an id on the same element.
In jQuery, the class and ID selectors are the same as in CSS. If you want to select elements with a certain class, use a dot ( . ) and the class name. If you want to select elements with a certain ID, use the hash symbol ( # ) and the ID name.
#navigation .navigationLevel2 li { color: #f00; } This will also work and you don't need the extra class:
#navigation li li {} If you have a third level of LI's you may have to reset/override some of the styles they will inherit from the above selector. You can target the third level like so:
#navigation li li li {} If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
