Reading Selectors

Reading CSS selectors is like reading shorthand. Each character, space, etc have a deeper meaning. Use the key below to help formulate the CSS selectors into a readable format.

Beginning and Ending of all CSS Selectors

Always begin with this -> Find all Always end with this -> and select them

Example:

p {property: value;}

Find allp and select them {property: value;}

Click to see how to read this

Find all paragraphs and select them

ID Selector (Use the # character)

a tag with an id of ______

Example:

#bob {property: value;}

Find all#a tag with an id ofbob and select them {property: value;}

Answer

Find a tag with an id of bob and select it

Example:

section #bob {property: value;}

Find allsection , now find any descendants that have a#tag with an id ofbob and select them {property: value;}

Answer

Find all sections , now find any descendants that have a tag with an id of bob and select it

Class Selector (Use the . character)

tags with a class of ______

Example:

.sam {property: value;}

Find all.tags with a class ofsam and select them {property: value;}

Answer

Find all tags with a class of sam and select them

Example:

section .sam {property: value;}

Find allsection , now find any descendants that have a.tag with a class ofsam and select them {property: value;}

Answer

Find all sections , now find any descendants that have tag with a class of sam and select them

Child Selectors (Use the > character)

, now find any children that are ______

Example:

section>p {property: value;}

Find allsection>, now find any children that arep and select them {property: value;}

Answer

Find all sections , now find any children that are paragraphs and select them

Descendent Selectors (Use a Space)

, now find any descendants that are ______

Example:

section p {property: value;}

Find allsection , now find any descendants that arep and select them {property: value;}

Answer

Find all sections , now find any descendants that are paragraphs and select them

Video Explanation