CSS Selector Cheatsheet
|
SELECTOR
|
MEANING
|
EXAMPLE
|
|
UNIVERSAL SELECTOR
|
Applies to all elements in document
|
*{} Targets all elements on page
|
|
TYPE SELECTOR
|
Matches elements names
|
h1 h2 {}
Targets<h1> <h2> elements on page |
|
CLASS SELECTOR
|
Matches an element whose class attribute has value that matches the one specified after full stop
|
.class{}
Targets any element whose class attribute has a value of class |
|
ID SELECTOR
|
Matches an element whose id attribute has value that matches the one specified after hash sign
|
#intro {}
Targets any element whose id attribute has a value of intro |
|
CHILD SELECTOR
|
Matches an element that is a direct child of another
|
li > a {}
Targets any <a> elements that are children of any <li> element |
|
DESCENDANT SELECTOR
|
Matches an element that is a descendant of another specified element
|
p a {}
Targets any <a> elements that sit inside any <p> element |
|
ADJACENT SIBLING SELECTOR
|
Matches an element that is next sibling of another
|
h1 + p {}
Targets first <p> element after any <h1> element |
|
GENERAL SIBLING SELECTOR
|
Matches an element that is a sibling of another, although it does not have to be the direclty preceding element
|
h1 ~ p {}
if you had two elements that are siblings of an element, this rule would apply to both |
No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
