Advanced CSS selectors

1. Advanced CSS selectors Matt Brendzel GA Boston Programs Producer William Neely CEO, Piecewise.com

2. layout Of type Class of type ID of type Syntax: ElementSelector • div#container • ul.aList

3. Ancestors and Children • <div> • <ul id=“firstUL”> • <li> • <ul id=“secondUL”></ul> • </li> • </ul> • </div> • Background to firstUL • Background to secondUL • Background to both Ancestor selector • Syntax: parent ancestor • div ul • Selects all ul that are ancestors of a div Child select • Syntax: Parent > child • Div > ul • Selects all ul that are direct descendants of a div

4. First-Child, Last-Child,Nth-child <div> • <div></div> • <div></div> • <div></div> • <div></div> • <div></div> • <div></div> </div> First-child • Syntax: element:first-child • div:first-child Last-child • Syntax: element:last-child • Div:last-child Nth-child • Syntax: element:nth-child(formula) • Formula values • Even • odd • Formula with n (n starts at 0) • an+b (analogous to mx+b=y)

5. Siblings <div> • <div id=“first”></div> • <ul id=“sec”></ul> • <div id=“third”></div> </div> Next sibling • Syntax: element+element • Ul+div Previous sibling • Syntax: element~element • Ul~div

6. Attribute and empty <div> • <input type=“text”> • <input type=“checkbox”> • <input type=“submit”> </div> <ul> </ul> <ul> • <li>some stuff</li> </ul> Empty • Syntax: element:empty • ul:empty Syntax: [attribute] • [type] Type with specific value • Syntax: [attribute=value] • input[type=text]

7. Not and combinations Not • Excludes matched elements • Syntax: element:not(selector) • div:not(#container) Combinations • ulli:not(:first-child) • div > [type=text]:first-child • ul.aList > li:last-childdiv:not(:empty)

8. Full list http://www.w3schools.com/cssref/css_selectors.asp