Estelle Weyl
www.standardista.com
@estellevw
@standardista
Select This!
CSS Selectors
Me
Basic Selectors
<ul> <li id="myID" class="myClass">item 1</li> <li class="myClass">item 2</li> <li>item 3</li> </ul>
- #myID
- ID
- .myClass
- class
- li
- tag name
Selectors API
var chil = $('#bar .foo');
Natively
var el = document.querySelector('#bar');
var chil = el.querySelectorAll('.foo');
or
chil = document.querySelectorAll('#bar .foo');
Relational selectors
- item 1
- item 2
- item 3
- item a
- item b
- item c
- item 4
- item 5
- item 6
- item 7
- ul li
- descendant selector
matches nested <li>s - ol > li
- child selector
matches <li>s in <ol> but not nested <ul> - li.myClass + li
- adjacent sibling
- NEW (IE7+)
li.myClass ~ li -
general sibling selector
matches later siblings, but not nested.
Play Time
Lots 'o Selectors
- *
- E
- .class
- #id
- E F
- E > F
- E + F
- E[attribute]
- E[attribute=value]
- E[attribute~=value]
- E[attribute|=value]
- :first-child
- :lang()
- :before
- ::before
- ::selection
- :after
- ::after
- :first-letter
- ::first-letter
- :first-line
- ::first-line
- E[attribute^=value]
- E[attribute$=value]
- E[attribute*=value]
- E ~ F
- :root
- :last-child
- :only-child
- :nth-child()
- :nth-last-child()
- :first-of-type
- :last-of-type
- :only-of-type
- :nth-of-type()
- :nth-last-of-type()
- :empty
- :not()
- :target
- :enabled
- :disabled
- :checked
- :indeterminate
- :default
- :valid
- :invalid
- :in-range
- :out-of-range
- :required
- :optional
- :read-only
- :read-write
All supported since IE9, and all other browsers
Attribute Selectors
E[att] {/* has the attribute at all */}
E[att=val] {/* exact */}
E[att~=val] {/* val is a space separated word */}
E[att|=val] {/* with a dash */}
E[att^=val] {/* begins with val */}
E[att$=val] {/* ends with val */}
E[att*=val] {/* val is anywhere as a substring */}
@media print{
abbr[title]:after {
content: "(" attr(title) ")";
}
a[href^=http]:after {
content: "(" attr(href) ")";
}
}
Note: Multiple attributes work! a[title][href]
Using attribute selectors
Note: The top line of the example is editable. The CSS will impact the contents on the rest of the page.
Structural selectors
:nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type() :first-child* :last-child :first-of-type :last-of-type :only-child :only-of-type :root :empty :not(:empty)
- Target elements on the page based on their relationships to other elements in the DOM.
- Updates dynamically if page updates.
- Reduced need for extra markup, classes and IDs
First, last, & only
:first-child :last-child :first-of-type :last-of-type :only-child :only-of-type
Easier to explain by example
First, last, & only
nth pseudo-classes
:nth-child(3n) :nth-last-child(odd) :nth-of-type(5) :nth-last-of-type(3n+1)
Target element or elements based on argument passed to the selector
- :nth-of-type(even)
- :nth-of-type(odd)
- :nth-of-type(an+b)
Structural Selectors
li:first-child,
li:last-child {
font-weight: bold;
}
li:first-of-type,
li:last-of-type{
text-decoration:line-through;
}
li:nth-child(even) {
background-color: #CCC;
}
li:nth-child(3) {
color: #CCC;
}
li:nth-of-type(odd) {
background-color: #FFF;
}
li:nth-of-type(4n) {
color: #C61800;
}
li:nth-of-type(3n-1) {
text-align: right;
}
- item 1
- item 2
- item 3
- item 4
- item 5
- item 6
- item 7
- item 8
- item 9
- item 10
Structural Selectors
- 1
- 1
- 2
- 1
- 2
- 3
- 1
- 2
- 3
- 4
li:only-of-type{width: 100%;}
li:nth-of-type(1):nth-last-of-type(2),
li:nth-of-type(2):nth-last-of-type(1){width: 50%;}
li:nth-of-type(1):nth-last-of-type(3),
li:nth-of-type(3):nth-last-of-type(1),
li:nth-of-type(2):nth-last-of-type(2){width: 33.33%;}
li:nth-of-type(1):nth-last-of-type(4),
li:nth-of-type(2):nth-last-of-type(3),
li:nth-of-type(3):nth-last-of-type(2),
li:nth-of-type(4):nth-last-of-type(1){width: 25%;}
Structural Selectors
Flag with Structural Selectors
Simpler Flag with Structural Selectors
:not - Negation pseudo-class
div:not(.excludeMe)
:not - Negation pseudo-class
UI pseudo-classes
Based on current state of UI
:enabled :disabled :checked
:invalid :required :optional
:in-range :out-of-range :read-only :read-write :default
Example:
input[type=checkbox]:checked + label {
color: red;
}
Other Pseudo Classes
:lang :target :empty
link & user action pseudo-classes
:link :visited :hover :active :focus
:target pseudo-class
:root
:root
Selects the document root, which is <html>
- Declare font-size on :root if using rem units
- Style :root only if showing <head> (as in our exercise files)
- In CSS4, define Defining Variables on root. (see Variables module)
Pseudo elements
Pseudo elements
::first-line
::first-letter
::selection (not in specification)
::before
::after
Pseudo-classes select elements that
already exist.
Pseudo-elements create "faux" elements you can style.
Use single colon because of IE
::before and ::after
p:before {
content: "before content - ";
font-weight: bold;
}
p:after{
content: " - after content";
font-weight: bold;
}
<p>the content</p>
the content
<p>
<before>before content - </before>
the content
<after> - after content</after>
</p>
Try it out ::selection
.thisSlide *::selection {
background-color: #990000;
color: #ffffff;
}
Prefix with -moz- for Firefox
Use single colon because of IE
Disabling ::selection
.thisSlide *::selection {
background-color: #990000;
color: #ffffff;
}
For mobile but impacts desktop too:
.thisSlide {
-webkit-tap-highlight-color: #bada55;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
Tips
- selectivizr.com + JS Library = JS for backward compatibility
- jQuery $(selector) == document.querySelectorAll(selector)
- Many pseudo-elements in the shadow DOM
- ::-webkit-progress-bar
- ::-webkit-inner-spin-button /outer-spin-button
- ::-webkit-validation-bubble / arrow-clipper /arrow /message
- ::-webkit-scrollbar
- ::-webkit-scrollbar-button / thumb / track
- Mozilla Pseudo-elements and pseudo-classes