xxxxxxxxxx
h1 {
color: red;
}
In this CSS code example that sets the color of all h1s to red
the "h1" is the selctor because we are applying this style to
the h1s.
xxxxxxxxxx
.class1.class2 .name1.name2 Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2 .name1 .name2 Selects all elements with name2 that is a descendant of an element with name1
* * Selects all elements
element p Selects all <p> elements
element.class p.intro Selects all <p> elements with class="intro"
element,element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects the first <p> element that is placed immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that is preceded by a <p> element
/*Attribute selectors*/
p[class="review"] /*all of paragraphs with review class on them*/
img[href^="../my code guide/"] /*every image that starts with that addres (replacing "=" with"^=")*/
img[href$="../my code guide/"] /* its end with this attribute*/
img[href*="../my code guide/"] /*if its contain anywhere*/
h1[class~="site-header"] /*only works with white space seperator*/
h1[class|="subtitle"] /*selects ones that start with "subtitle" or "subtitle" and "-" in following*/
xxxxxxxxxx
*all elements
divall div tags
div,pall divs and paragraphs
div pparagraphs inside divs
div > pall p tags, one level deep in div
div + pp tags immediately after div
div ~ pp tags preceded by div
.classnameall elements with class
#idnameelement with ID
div.classnamedivs with certain classname
div#idnamediv with certain ID
#idname *all elements inside #idname
xxxxxxxxxx
div{}
#idname{}
.classname{}
/*Psuedo element*/
div::first-letter {}
div::first-word{}
div::after {}
div::before {}
/*Psuedo class*/
div:link{}
div:hover{}
div:active{}
div:visited{}
div:focus{}
xxxxxxxxxx
div { color: red; } // the "div" in .css is a selector targeting all <div> elements
simpleSelector = document.querySelectorAll()("div"); // all divs
complexSelector = document.querySelector("div.user-panel.main input[name='login']") // the first <input> element with the name "login" (<input name="login"/>) located inside a <div> whose class is "user-panel main" (<div class="user-panel main">) in the document is returned