Selectors

Type Selectors, applied to a specific element type:

 

p { color: # F00; }

 

Universal Selector, matches any type of element:

 

* { background-color: blue; }

 

Descendant Selectors, match specific elements within another element. For example <li> elements that are only contained within a <div> element:

 

div li {color: #00F; }

 

Class Selectors, matches the class attribute of an element:

 

.topBox { border: solid 1px green; }

 

or to provide specific styling to <p> elements with the class attribute set to .topBox

 

p.topBox { color: #FFFF00; }

 

or apply multiple classes to an element:

 

.center { text-align: center; }

.bold {font-weight: bold; }

<p class="center bold"> <!-- note use of multiple classes -->

This para will be styled by the classes center and bold.

</p>

 

ID Selectors, match elements with a specific id attribute, utilising the hash/pound # symbol:

 

#uniqueID { color: #00F; }

 

ID selectors can also be made more specific when used in combination with element type selectors, e.g every <p> element with the id="uniqueID" attribute will be rendered green:

 

p#uniqueID { color: #0F0; }

 

Or use ID selectors as the foundation for descendant selectors. e.g. These <li> elements will only be rendered red when they lie within elements set with the id="uniqueID" attribute:

 

#uniqueID li { color: #F00; }

Save & refresh browser:

Here's some text!

This isn't styled

  • First item
  • Second item
  • Third item
  • Fourth item

 

 

Child Selectors, are applied only to direct child elements of the parent element. This example follows on from the previous, but note that the child selector rule is placed after the initial ID selector (setting the colour to green) and therefore over-rides the rule to render the direct <p> child element blue. Indirect elements are not affected by the child selector:

Save & refresh browser:

Direct child element. 

Here's some text!

Indirect child element.

 

 

Attribute Selectors, match elements with specific attributes

 

  • p[title] { color: #F00; }
Matches all elements with a title attribute
  • p[title = "exactly" ] { color: #0F0; }
Matches all elements whose title attribute has an exact value of "exactly"
  • p[title ~= exact ] { color: #00F; }
Matches all elements whose title attribute contains the word "exact"
  • p[title |= in ] { color: #90F; }
Matches all elements whose title attribute is exactly "in" or starts with "in-"

*note: hyphen on latter term

Save & refresh browser:

Red paragraph with a tooltip.

Paragraph without tooltip.

Green paragraph with a tooltip.

Blue paragraph with a tooltip.

Purple paragraph with a tooltip.

 

 

Grouping Selectors. The same style can be applied to multiple selectors by separating each selector with a comma ,

Save & refresh browser:

Main content goes here.

Leave a Reply