css selectors

1*all elements
2divall div tags
3div,pall divs and paragraphs
4div pparagraphs inside divs
5div > pall p tags, one level deep in div
6div + pp tags immediately after div
7div ~ pp tags preceded by div
8.classnameall elements with class
9#idnameelement with ID
10div.classnamedivs with certain classname
11div#idnamediv with certain ID
12#idname *all elements inside #idname
13

1* {
2color: pink;
3}
4h1, h2 {Select all h1 and h2}
5li a {select all anchor inside a list}
6h1 + p {select all p placed after an h1}
7div > li {all li directly in a div}
8

1h1 {
2  color: red;
3}
4
5In this CSS code example that sets the color of all h1s to red 
6the "h1" is the selctor because we are applying this style to 
7the h1s.

1ul li { margin: 0 0 5px 0; }
2ul > li { margin: 0 0 5px 0; }

1
2const x = document.querySelectorAll("p.intro"); 

1div { color: red; } // the "div" in .css is a selector targeting all <div> elements
2simpleSelector = document.querySelectorAll()("div"); // all divs 
3complexSelector = 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