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

selectorA {
   property1: value1;
   property2: value2;
}

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

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

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

E
E F
.class
#ID
:link
:active

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

div#unique .repeated a.external:link { 
   ... 
}

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

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

• :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]?)

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

Natively

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

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

or

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

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');
  }
}      

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

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

• 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

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>

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"] {...}

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">*/
}

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)"; }

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]

E[title*="foobar" i]

E[title*="FooBar" i]

input[type="checkbox"]

input[type="ChEcKbOx"]

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

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.

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

Based on the UI state of a checkbox

:checked
:default
:indeterminate
:enabled
:disabled

Based on the UI state of a checkbox

Make prior checkbox 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

:valid
:invalid

:required
:optional

:in-range
:out-of-range

:user-invalid

:user-invalid

:-moz-ui-invalid

:read-only
:read-write

:placeholder-shown

:blank
(:empty)

When the placeholder attribute value is visible

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,