HTML/CSS/Style Basics/selector

Attribute Selectors

   <source lang="html4strict">

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

You must place all attributes in double quotes.

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

</source>
   
  

The Adjacent Sibling Selector

   <source lang="html4strict">

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

h1 + p {}

</source>
   
  

The Child Selector

   <source lang="html4strict">

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

td > b {}

</source>
   
  

The Class Selector

   <source lang="html4strict">

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

This paragraph contains an aside.

</source>
   
  

The Descendent Selector

   <source lang="html4strict">

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 {}

</source>
   
  

The ID Selector

   <source lang="html4strict">

The id selector works on the value of id attributes.

p.#abstract

</source>
   
  

The Type Selector

   <source lang="html4strict">

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

page, heading, paragraph {}

</source>
   
  

Universal Selector

   <source lang="html4strict">

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

• {}

</source>