CSS Selectors

http://estelle.github.com/cssdeepdive/selectors.html

Selectors

selectorA {
   property1: value1;
   property2: value2;
}

selectorB {
   property1: value3;
   property2: value4;
}

Selectors

selector:pseudo-class::pseudo-element {
    -vendor-property: value;
}

selector[attribute],
selector ~ relation {
    property: -vendor-value;
    -vendor-property: -vendor-value;
    -vendor-property: weirdsyntax;
}

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

Play Time

Try it out

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 & Combinators

item 1
item 2
item 3
- item a
- item b
- item c
hasaclass
item 5
item 6
item 7

ul li, ol li: descendant selector
matches nested <li>s
ol > li: child selector
matches <li>s in <ol> but not nested <ul>
li.hasaclass + li: adjacent sibling
NEW (IE7+)
li.hasaclass ~ li: general sibling selector
matches later siblings, but not nested.

CSS Selectors 4: Combinators

Reference combinator

E /attr/ F

label /for/ input

Parent selector

E! > F

:has

In case you were wondering...

function hasaclass(slctr){
  var i = j = 0,
      elements = document.querySelectorAll('.cur .ex li'),
      cur = document.querySelectorAll('.cur .ex ' + slctr);

  for (; i < elements.length; i++){
    elements[i].classList.remove('active');
  }

  for (; j < cur.length; j++){
    cur[j].classList.add('active');
  }
}

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
:default
:valid
:invalid
:in-range
:out-of-range
:required
:optional
:read-only
:read-write

Mo' Selectors

:indeterminate
E:not(s1, s2)
E:matches(s1, s2)
E:has(rs1, rs2)
E[foo="bar" i]
E:dir(ltr)
E:lang(zh, *-hant)
:any-link
:scope
:current
:current(s)
:past
:future
:active-drop
:valid-drop
:invalid-drop
:placeholder-shown
:blank
F || E
:nth-column(n)
:nth-last-column(n)
:scope
:scope-context()
:host
:host()
:host-context()
::shadow
::content
E /deep/ F
::region

Specificity: How it works

1-0-0: ID selector
0-1-0: Class selector (Also attribute selector & pseudoclass)
0-0-1: Element Selector

The * selector, or global selector, has no value.

* {} 0-0-0

Combinators, like ~, >, and + have no value

ul li {} 0-0-2
ul > li {} 0-0-2

Standardista

Attribute selectors

element[attribute]: Select elements containing the named attribute

img[alt] {}
     <img src="image.jpg" alt="accessible">
     <img src="image.jpg" title="inaccessible">
form [type] {}
     <input type=date>
     <select>

IE6 sucks
IE7 support basic non-empty attribute

Older attribute selectors

E[attr]

Element E that has the attribute attr with any value.

E[attr="val"]

Element E that has the attribute attr with the exact, case-sensitive if attribute is case sensitive, value val.

E[attr|=val]

Element E whose attribute attr has a value val or begins with val- ("val" plus "-").

p[lang|="en"]{/* <p lang="en-us">  <p lang="en-uk"> */ }

E[attr~=val]

Element E whose attribute attr has within its value the space-separated full word val.

a[title~=more] {/* <a title="want more info about this?">}

CSS3 Attribute Selectors

E[attr^=val]

Element E whose attribute attr starts with the value val.

a[href^=mailto] {background-image: url(emailicon.gif);}
a[href^=http]:after {content: " (" attr(href) ")";}

E[attr$=val]

Element E whose attribute attr ends in val .

a[href$=pdf] {background-image: url(pdficon.gif);}
a[href$=pdf]:after {content: " (PDF)";}

E[attr*=val]

Element E whose attribute attr matches val anywhere within the attribute. Similar to E[attr~=val] above, except the val can be part of a word.

Note: Multiple attributes work! a[title][href]

Attribute Selectors Recap

input[placeholder] {
/* matches any input with a placeholder */}
input[type=email] {
/* exact match */}
abbr[title~=unicorn] {
/* matches unicorn but not unicorns */}
abbr[title|=en] {
/* matches en-us and en-uk */}
a[href^=mailto] {
/* starts with */}
a[href$=pdf]{
/* ends in */}
abbr[title*=unicorn] {
/* matches unicorn and unicorns */}

E:[att] 
/* have 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) ")";
  }
}

Using attribute selectors

Attribute Selectors

Note: The top line of the example is editable. The CSS will impact the contents on the rest of the page.

Attribute Selectors 4: Case Insensitivity

E[foo="bar" i]

input[type=checkbox i]

Test page

UI pseudo-classes

Based on current state of UI

  :enabled

  :disabled

  :checked

  :indeterminate (Level 4)

input[type=checkbox]:checked + label {
  color: red;
}

Check and Uncheck Me
Check and uncheck me too!

Form related UI pseudo-classes

:valid
:invalid
:required
:optional
:in-range
:out-of-range
:read-only
:read-write
:default

Form related UI pseudo-classes

input:valid { border: 1px solid green;}
input:invalid { border: 1px solid red;}
input:required,
input[aria-required="true"] {border-width: 5px;}
input:optional {border-width: 10px;}
input:out-of-range { background-color: pink;}
input:in-range { background-color:lightgreen;}

Number between 5 and 7
Number between 0 and 10

<input type="number" min="5" max="7"
  required aria-required="true"/>

<input type="number" min="0" step="0.1" max="10"/>

UI selectors

UI Selectors

Test them out for yourselves

Open in new page

UI selectors

UI Selectors

Test them out for yourselves

Open in new 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

^* CSS2 / IE8

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

First, last and 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: hsl(205, 87%, 50%);
}
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(1):nth-last-of-type(4) ~ li {width: 25%;}

Structural Selectors

Flag with Structural Selectors

USA Flag

Simpler Flag with Structural Selectors

USA Flag

Structural Selectors Level 4

E:nth-match(n of selector)
E:nth-last-match(n of selector)

li:nth-match(2n of .foo)
li:nth-last-match(3n+1 of .bar)

:not - Negation pseudo-class

E:not(s1)

div:not(.excludeMe)

CSS Selectors Level 4

E:not(s1, s2)

li:not(.foo, .bar)

E:matches(s1, s2)

li:matches([title], [role])

Experimental :any

E:matches(s1, s2)

:-webkit-any(article, aside) :-webkit-any(article, aside) h1,
:-moz-any(article, aside) :-moz-any(article, aside) h1 {

}

nav a:matches(.foo, .bar, .bam),
nav a:-webkit-any(.foo, .bar, .bam),
nav a:-moz-any(.foo, .bar, .bam) {

}

nav a:not(:matches(.foo, .bar, .bam)),
nav a:not(:-webkit-any(.foo, .bar, .bam)),
nav a:not(:-moz-any(.foo, .bar, .bam)),
nav a:not(.foo, .bar, .bam) {

}

:empty pseudo-class

E:empty

p:empty

Matches:

<p></p>
<p><!-- this is a comment --></p>

CSS Selectors Level 4

E:blank

p:blank

Also matches:

<p>      </p>

Link Pseudo Classes

:link
:visited

CSS Selectors Level 4

:any-link
:local-link
:local-link(n)

link levels

:local-link {
  text-decoration: none;
  color: inherit;
}

a[href^=http],
a[href^="http://"],
a[href^="https://"],
a:not(:local-link(0)){
  /* external link */
}

User Action Pseudo Classes

:hover
:active
:focus

Drag and Drop Pseudo Classes

CSS Selectors Level 4

:active-drop :valid-drop :invalid-drop

Other Pseudo Classes

:target

CSS Selectors Level 4

:scope

Language Pseudo Classes

:lang(en)

CSS Selectors Level 4

:lang(zh, *-hant)
:dir(ltr|rtl)

: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)

example

Download

Specificity: The less than obvious

The * selector, or global selector, has no value.

* {} 0-0-0

Combinators, like ~, >, and + have no value

ul li {} 0-0-2
ul > li {} 0-0-2

:not has no value, but parameter selector does

.myClass:not(p) {} 0-1-1

Specificity is not inheritance

Exercise
http://bit.ly/1qLuzDR

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

::first-letter

Drop Cap

::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: hsl(205, 87%, 50%);
   color: #ffffff;
}

For mobile but impacts desktop too:

.thisSlide {
  -webkit-tap-highlight-color: #bada55;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

::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

Generated Content

Test them out for yourselves

IE10 Specific

::-ms-browse
::-ms-value
::-ms-check
::-ms-clear
::-ms-expand
::-ms-fill
::-ms-fill-lower
::-ms-fill-upper
::-ms-reveal
::-ms-thumb
::-ms-ticks-after
::-ms-ticks-before
::-ms-tooltip
::-ms-track