CSS3 Selectors

With slides from:
Estelle Weyl's Selectors: Select This!

CSS Recap

 
selector {
  property: value;
  property: value;
}

body {
  color: yellow;
  background-color: black;
}

#container {
  width: 70%;
  padding: 10px;
  margin: auto;
}

.byline {
  font-size: 12px;
  border-bottom: 1px solid #ccc;
}

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

MDN: Selectors

Relational selectors

MDN: Combinators

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
li.myClass ~ li: general sibling selector
matches later siblings, but not nested.

Try it out

CSS2 Attribute Selectors

MDN: Attribute Selectors

element[attr]: Select elements containing the named attribute

img[alt] {}
     <img src="image.jpg" alt="accessible">     
     <img src="image.jpg" title="inaccessible">

element[attr="val"]: Selects elements with the attribute attr with the exact, case-sensitive if attribute is case sensitive, value val.

[type="date"] {} 
     <input type="date">  
     <input type="text">

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

CSS2 Attribute Selectors

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.

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 */
.

Try it out

CSS2 Pseudo-Classes: Review

a:link  { color:#FF0000; } /* unvisited link */

a:visited { color: green; } /* visited link */

a:hover { color: purple; } /* moused over */

a:focus { color: purple; } /* selected with keyboard*/

a:active { color: blue; } /* activated link */

Form Pseudo-Classes

MDN: Pseudo-classes

Based on current state of UI

:enabled
:disabled
:checked

input:checked {
  outline: 2px solid red;
}

Check and Uncheck Me

input:checked + label {
  color: red;
}

Check and uncheck me too!

Form Validation Pseudo-Classes

:valid
:invalid
:required
:optional

:in-range
:out-of-range
:read-only
:read-write

:default

Example:

input:valid { border: 1px solid green;}
input:invalid { border: 1px solid red;}
input:required {border-width: 5px;}
input:optional {border-width: 10px;}
input:out-of-range { background-color: pink;}
input:in-range { background-color:lightgreen;}

Try it out

Exercise!

Structural Pseudo-Classes

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

Try it out

nth Pseudo-Classes

:nth-child(3) 

: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

Table Styling Example

tr:first-child,
tr:last-child {
  font-weight: bold;
}
tr:first-of-type,
tr:last-of-type {
  text-decoration:line-through;
}
tr:nth-child(even) {
  background-color: #CCC;
}
tr:nth-child(3) {
  color: #CCC;
}
tr:nth-of-type(odd) {
  background-color: #FFF;
}
tr:nth-of-type(4n) {
  color: #C61800;
}
tr:nth-of-type(3n-1) {
  font-style: italic;
}