HTML/CSS/Style Basics/selector

Attribute Selectors

 
Attribute selectors allow you to use the attributes that an element carries in the selector. 

<p id="important" class="XHTML attributes">You must place all attributes
in double quotes.</p>


paragraph[id] matches an element called paragraph carrying an attribute called id
paragraph[id="important"] matches an element called paragraph carrying an attribute called id whose value is important
paragraph[class~="XHTML"] matches an element called paragraph carrying an attribute called class, whose value is a list of space-separated words, one of which is exactly the same as XHTML
paragraph[class|="XHT"] matches an element called paragraph carrying an attribute called class whose value begins with XHT

The Adjacent Sibling Selector

 
An adjacent sibling selector matches an element type that is the next sibling of another. 

h1 + p {}

The Child Selector

 
The child selector matches an element that is a direct child of another. 

td > b {}

The Class Selector

 
The class selector matches a rule with an element carrying a class attribute whose value you specify in the class selector. 

<p class="BackgroundNote">This paragraph contains an aside.</p>

The Descendent Selector

 
The descendent selector matches an element type that is a descendent of another specified element, 
at any level of nesting not just a direct child. 
table b {}

The ID Selector

 
The id selector works on the value of id attributes. 

p.#abstract

The Type Selector

 
The type selector matches all of the elements specified in the comma-delimited list. 

page, heading, paragraph {}

Universal Selector

 
The universal selector is an asterisk; 
it is like a wildcard and matches all element types in the document.
*{}