Estelle Weyl | @estellevw | Github | Press key to advance.

CSS Selectors

  1. Selectors Part I
    • Overview
    • Basic Selectors
    • Specifications
    • Selectors API
    • Brief intro to Specificity
    • Global selector
    • Relational selectors & combinators
    • Attribute Selectors
    • UI Pseudo-Class Selectors
  1. Selectors Part II
    • Structural selectors
    • Other Logical Combinations:
      Negation, Matching and Parent
    • Linguistic Pseudo Classess
    • Link, location, and user action
    • Other Pseudo Classes
  2. Selectors Part III
    • Pseudo-element selectors

estelle.github.io/CSS/selectors/

Selectors/Rulesets

Selectors define which elements & pseudo elements rulesets are applied to.

selectorA {
   property1: value1;
   property2: value2;
}

selectorB, 
selectorC {
   property1: value3;
   property2: value4;
}

Selectors

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

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

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 in CSS Level 1

E
E F
.class
#ID
:link
:active

Selectors in CSS Level 1

span#ID,
.class,
a.external:link { 
   ... 
}

Selectors in CSS Level 1

div#unique .repeated a.external:link { 
   ... 
}
1-3-2

Lots 'o Selectors

CSS Level 1 Selectors

  • E
  • .class
  • #id
  • E F
  • :link
  • :active

CSS Level 2 Selectors

  • *
  • E > F
  • E + F
  • [attr]
  • [attr=value]
  • [attr~=value]
  • [attr|=value]
  • :first-child
  • :lang()
  • :focus
  • :hover
  • :visited
  • :before
  • :after
  • :first-letter
  • :first-line

Lots 'o Selectors

CSS Selectors Level 3

  • ::before
  • ::after
  • ::first-letter
  • ::first-line
  • [attr^=value]
  • [attr$=value]
  • [attr*=value]
  • E ~ F
  • :root
  • :last-child
  • :only-child
  • :nth-child(n)
  • :nth-last-child(n)
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :nth-of-type(n)
  • :nth-last-of-type(n)
  • :empty
  • :not(selector)
  • :target

Lots 'o Selectors

UI / Selectors #4

  • :enabled
  • :disabled
  • :read-only
  • :read-write
  • :placeholder-shown
  • :default
  • :checked
  • :indeterminate
  • :valid
  • :invalid
  • :in-range
  • :out-of-range
  • :required
  • :optional
  • :blank
  • :user-invalid

CSS Selectors Level 4

  • :not(s1, s2)
  • :is()
  • :where()
  • :has(rs1, rs2)
  • [foo="bar" i]
  • [foo="bar" s]
  • :dir(ltr)
  • :lang(zh, *-hant)
  • :any-link
  • :local-link
  • :scope
  • :target-within
  • :scope
  • :focus-within
  • :focus-visible
  • :nth-child(n [of S]?)
  • :nth-last-child(n [of S]?)

CSS Selectors Level 4

Time Dimensional

  • :current
  • :current(s)
  • :past
  • :future

Video/Audio Play States

  • :playing
  • :paused

Grid-structural

  • F || E
  • :nth-col(n)
  • :nth-last-col(n)

More...

Sometime

  • ::selection

css-scoping-1

  • ::slotted()
  • :host
  • :host-context()
  • ::shadow
  • ::content

Removed

  • :column(selector) (see :nth-col())
  • E /foo/ F
  • E! > F (see :has())
  • E >> F
  • :matches() (now :is())
  • :drop
  • :nth-match() (now :nth-child(… of selector))

All the selectors

Open

Selectors API

Selectors API

var chil = $('#bar .foo');

Natively

var el   = document.querySelector('#bar');

var chil = el.querySelectorAll('.foo');

or

chil = document.querySelectorAll('#bar .foo');

In some of our slides ...

function makeActive(slctr){
  let 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');
  }
}      

Brief intro to
Specificity

Will be covered in depth later

Specificity (SpeciFISHity)

Download

Specificity: How it works

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

Specificity: How it works

body.blue div#someId a#otherId.classy {
  color: blue;
 }
#myPage #mySection article.home p.important a {
  color: red;
}
2-X-X
X-2-X
X-X-3

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 weight.

* {} 0-0-0 

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

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

Global selector
*

*

Play Time

Try it out

Relational selectors & combinators

Relational selectors & combinators

ul li,
ol li
descendant selector
matches nested <li>s
ul > li,
ol > li
child selector 
matches <li>s in <ol> but not nested <ul>
li.hasaclass + li
adjacent sibling 
li.hasaclass ~ li
general sibling selector
matches later siblings, but not nested.
  1. item 1
  2. item 2
  3. item 3
    • item a
    • item b
    • item c
  4. hasaclass
  5. item 5
  6. item 6
  7. item 7

Play Time

Try it out

Attribute Selectors

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>

CSS 2 attribute selectors

E[attr]
Has the attribute attr with any value.
p[lang]{
  /* <p lang="en-us">  
     <p lang="fr-fr"> */
}
E[attr=val]
Has the attribute attr with the exact value val.
p[id="home"] {...}

CSS 2 attribute selectors

E[attr|=val]
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]
Attribute attr includes the full word val.
a[title~="word"] {
    /* <a title="Three word sentence">*/
}

Attribute Selectors, CSS Selectors 3

E[attr^=val]
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]
Attribute attr ends in val . 
a[href$=pdf] { background-image: url(pdficon.gif); }
    a[href$=pdf]::after { content: " (PDF)"; }

Attribute Selectors in CSS Selectors Level 3

E[attr*=val]
Attribute attr matches val anywhere within the attribute.
a[title*="word"] { 
  /* <a title="Sentence with 4 words"> */ 
}

Multiple attributes work! 

a[title][href]
input[type="number"][min][max]

Attribute Selectors 4: Case Insensitivity

E[title*="foobar" i]
E[title*="FooBar" i]
input[type="checkbox"]
input[type="ChEcKbOx"]

Relevant if attribute value is case senstive (Strings, not keywords)

Attribute Selectors 4: Case Sensitivity

E[id="foobar"]
E[id="FooBar"]
a[target="ABC" s ] /* example */
a[target="abc" s ]

Relevant if attribute value is NOT case sensitive in CSS.

case sensitivity in CSS is not exactly the same as in HTML

Case Insensitivity

Codepen

Attribute Selector Case (in)sensitivity

Open

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 */}
abbr[title*=UNICORN i] {/* 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 */
E:[att*=VAL i]  /* anywhere as a case-insenstive substring */
E:[att*=VAL s]  /* anywhere as a case-sensitive substring */

Using attribute selectors

Attribute Selectors

Note: The CSS is editable. Changing the CSS will impact the contents on the rest of the page.

UI Pseudo-Class Selectors

UI pseudo-classes

:valid
:invalid

:required
:optional

:in-range
:out-of-range

:read-only
:read-write

:enabled
:disabled
:checked

:indeterminate

:default
:placeholder-shown

:blank 

:user-invalid

UI pseudo-classes

Based on the UI state of a checkbox

:checked
:default
:indeterminate
:enabled
:disabled
Basic User Interface Module Level 3 (CSS3 UI), CSS Selectors Level 4

:checked

Based on the UI state of a checkbox


:checked + label Example

:checked slides

:indeterminate


What is indeterminate?

  • When radio and checkbox elements are neither checked nor unchecked
  • progress meter when the percent completion is not known
  • Radio-group initialized with no pre-selected choice

:indeterminate

Codepen

:enabled & :disabled

Codepen

:enabled & :disabled

Codepen

Form related UI pseudo-classes


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

UI Selectors & counters

Test them out for yourselves

Open in new page

:user-invalid

:user-invalid
:-moz-ui-invalid

Other UI pseudo-classes

:read-only
:read-write

:placeholder-shown

:blank
(:empty)

:read-write & :read-only

Codepen

:placeholder-shown

:placeholder-shown

When the placeholder attribute value is visible

:empty

E:empty
<E/>
<E></E>
<E><!-- this is a comment --></E>
<E title="this is an empty element"/>

Changed to be like -moz-only-whitespace

<E>   <!-- has white space -->   </E>

Use case: empty JS content hooks, hide the bullet from empty list items, removing box-model values for margins collapsing,

:blank

No browser support...

E:blank
<input name="novalue" value="">
<textarea name="novalue" value=""></textarea>
Not supported, but :empty matches

:empty & :blank

BREAK

Next ➹