Selectors

Compound selectors 6 Pt1. Language Selectors div .class1 .class2 [attr=val] :hover ::after tag pseudo-element filters (in any order) * Matches every element. .foo Same a s `*.foo`; tag is optional. .foo.bar Multiple filters to make the selector more specific. #unique-id Element IDs should be unique. [attr] Element with a specific HTML attribute. [attr="val"] Match by HTML attribute name and value. a:visited Visited links. A pseudo-class that is applied conditionally. Examples of selectors :hover Applied on mouse hover. Another pseudo-class. Combinators <div id=" unique "></div> <div class=" foo "></div> <div class=" foo bar "></div> <a href ="#baz">Link</a> .foo .foo.bar #unique [href="#baz"] [href] a:visited multiple filters pseudo-class by attribute multi-step selectors descendants <div class=" bar "> <div class=" foo "></div> < div > <div class=" foo "></div> </div> </div> <div class=" foo "></div> <div class=" bar "></div> <div></div> <div class=" bar "></div> .bar .foo .bar > div > .foo .foo + .bar space direct child next sibling .foo ~ .bar tilde subsequent siblings Logical selectors 7 Pt1. Language Selectors :is( S1 , S2 , ...) :not( S1 , S2 , ...) Either S1 or S2 or ... Neither S1 nor S2 nor ... ul , ol { /* level 1+ list */ } ul ul , ul ol , ol ul , ol ol { /* level 2+ list */ } ul ul ul , ul ul ol , ul ol ul , ul ol ol , ol ul ul , ol ul ol , ol ol ul , ol ol ol { /* level 3+ list */ } :is( ul , ol ) { /* level 1+ list */ } :is( ul , ol ) :is( ul , ol ) { /* level 2+ list */ } :is( ul , ol ) :is( ul , ol ) :is( ul , ol ) { /* level 3+ list */ } Simplified: Use logical OR to simplify rules like this: Use logical NOT to make exceptions : /* Make all paragraphs red, but with some exceptions. */ p:not(.exception) { color: red; } Without the logic NOT, this would require 2 rules: p { color: red; } p.exception { color: unset; } /* negate the previous rule */ Quick quiz : What's the logical AND in CSS ? Lookahead selectors stepping backward descendants <div class=" bar "> <div></div> < div > <div class=" foo "></div> </div> </div> <div> <div class="bar"></div> </div> <div class=" foo "></div> .bar :has (.foo) :has (> div .foo) :has (+ .foo) nothing direct child next sibling .bar :has (~ .foo) subsequent siblings Link and user action pseudo-classes 8 Pt1. Language Selectors :link Unvisited links (with href). :visited Visited links (with href). :hover Mouse over an element (any element). :focus An element that takes keyboard input (link, button, input). :active A button or link that is pressed. Examples of selectors :link:hover Multiple pseudo-classes. Recommended order: :link , :visited , :hover , :focus , :active . L ord V ader H ates F luffy A nimals. Indexed pseudo-classes :nth-child( A n+ B ) For all integers n = 0, 1, 2, 3, ..., apply the expression A n+ B , select elements whose index is in this set. :nth-child(1) The first child. Index starts from 1! :nth-child(2n) 0, 1, 2, 3, ... => 0, 2, 4, 6 , ...; Select the even-numbered. :nth-child(2n+1) 0, 1, 2, 3, ... => 1, 3, 5, 7 , ...; Select the odd-numbered. :nth-child(even) Same as 2n. :nth-child(odd) Same as 2n+1. Examples of selectors :nth-child(-n+3) 0, 1, 2, 3, ... => 3, 2, 1 , 0, ...; Select the first 3. :nth- last -child(1) Count backwards. p:nth-of- type (1) Count only the children of the same tag. :only-child Same as :nth-child(1):nth-last-child(1) :nth-child(1 of S ) Count the filtered child list by the selector S . <ul> <li>A</li> <li class="foo">B</li> <li>C</li> <li class="foo">D</li> <li class="foo">E</li> </ul> li.foo:nth-child(2) li:nth-child(2 of .foo) li.foo:nth-child(even) :nth-child(n+3) 0, 1, 2, 3, ... => 3, 4, 5, 6 , ...; Skip the first 2.