Code 201 Class 2 Reading Notes

Selectors

Type Selector

Matches element names

Examples h1, h2, h3, {}

Class Selector

Matches an element whose class attribute has a value that matches the one specified after the period (or full stop symbol)

Example .note {}, targets any element whose class attribute has a value of note

Example p.note {}, Targets only <p> elements whose class attribute has a value of note

ID Selector

Matches an element whose id attribute has a vlue that matches the one specified after the pound or hash symbol

Example #introduction {}, Targets the element whose id attribute has a value of introduction

Child Selector

Matches an element that is a direct child of another

Examples li>a {}, Targets any <a> eleements that are children of an <li> elements in the page)

Descendant Selector

Matches and eleement that is a descendent of another specified element (not just a direct child of that element)

Examples p a {}, Targets any <a> elements that sit inside a <p> eleement, even if there are other elements nested between them

Adjacent Sibling Selector

Matches an element that is the next sibling of another

Examples h1+p {}, Targets the first <p> element after any <h1> element (but not other <p> elements)

General Sibling Selector

Matches an element that is a sibling of another, although it does not have to be the directly preceding element

Examples h1~p {}, If you had two <p> elements that are siblings of an <h1> element, this rule would apply to both.

<—BACK