CSS selectors have gone through quite the evolution since the first CSS spec was brought out. Now we can select pretty much any element on a website without having to add a class or ID to the markup. Here I give a bird's eye view of the selector specification, highlight some useful selectors, introduce up and coming selectors and talk about selector performance and CSS maintenance.

1. THE EVOLUTION OF SELECTORS
-CSS Brigade -May29, 2014Dave Arthur

2. OVERVIEW OF TALK
1. Brief intro to how CSS evolves
2. Highlightsome level2/3 selectors
3. Look atsome level3/4 selectors
4. Talk aboutselector performance and maintenance

3. CSS IS CONSTANTLY EVOLVING
Selectors are now atLevel4. Whatdoes thatmean?

4. Since CSS3, the spec is broken up into “modules”, each defininga
specific partof CSS. [ClickimagebelowtoseeliveW3Cpage]

5. SELECTOR LEVELS

6. LEVEL 1
ID, class, type/tag, descendant
combinator, :link, :visited,
:active, :first-letter,
:first-line
LEVEL 2
Level1 + universal(*), attribute,
more combinators, :hover,
:focus, :before, :after,
:first-child
LEVEL 3
Level1 + 2 + structuralpseudo-
classes incl. :last-childand
:nth-child(), UI pseudo-classes,
negation (:not()) and:target
pseudo-classes
LEVEL 4
Level1 + 2 + 3 + more UI pseudo-
classes, :matches(), :has(), time
dimensionalpseudo-classes (e.g.
text to speech), link pseudo-classes,
drag-and-drop-relatedpseudo-
classes, grid-relatedpseudo-classes

7. LEVEL 2 SELECTOR HIGHLIGHTS

8. CHILD SELECTOR (COMBINATOR)
X > Y
Instead of targetingalldescendants of aparticular container, it
willonlytargetthe directchildren.

9. E.g.: Stylinganested news list
TransportMinisterLisaRaittsaidelectronic
devicescanbeusedduringtakeoff,ascent,
descent,landing.
CharlieAngus,FrancoiseBoivinwarn
governmenttotreadcarefullyoninternet
privacy.
Ottawa to allow air passengers to use
electronic devices on takeoff, landing
FlightattendantsresistTransportCanada’smovetocuttheirnumbers
Airlinetravel:5thingsyouneedtoknowaboutyourflightrights
NDP wants privacy, security experts to probe
warrantless data gathering
Declarationonmasssurveillancecallsfornewprivacymeasures
CyberbullyingbillsurveillancepowersalarmOntarioprivacywatchdog

10. <sectionclass="news">
<ulclass="news-list">
<li>
<articleclass="article">
<h4class="article-title"><ahref="#"></a></h4>
<figureclass="article-thumb"><ahref="#"><img></a></figure>
<pclass="article-desc"></p>
<ul>
<li><ahref="#"></a></li>
<li><ahref="#"></a></li>
</ul>
</article>
</li>
<li>
<articleclass="article">
<h4class="article-title"><ahref="#"></a></h4>
<figureclass="article-thumb"><ahref="#"><img></a></figure>
<pclass="article-desc"></p>
<ul>
<li><ahref="#"></a></li>
<li><ahref="#"></a></li>
</ul>
</article>
</li>
</ul>
</section>
Check outthe for fullHTMLCodePen

11. Usingadescendantselector -over-rides needed:
.news-listli{ /*Descendant*/
list-style:none;
padding:0.5em;
margin-bottom:0.5em;
border-bottom:1pxsolid#d5d5d5;
}
.articleli{
list-style:square;
font-size:0.9em;
padding:0; /*over-ride*/
border-bottom:none;/*over-ride*/
}

12. Usingachild selector -cleaner:
.news-list>li{ /*Childselector-onlyselectstop-levellis*/
list-style:none;
padding:0.5em;
border-bottom:1pxsolid#d5d5d5;
}
.news-listli{ /*Descendant-commonpropertyinalllis(DRY)*/
margin-bottom:0.5em;
}
.articleli{
list-style:square;
font-size:0.9em;
/*noover-rideofbottomborderorpaddingneeded*/
}
Check outthe for fullCSSCodePen

13. ADJACENT SIBLING SELECTOR
(COMBINATOR)
X + Y
Targets elements (Y) which have aparticular element(X) direcly
preceedingit.

14. E.g.: Simple inline menu with visualseparators
• • •Home About Work Contact

15. <navclass="menu"role="navigation">
<ulclass="menu-list">
<li><ahref="#">Home</a></li>
<li><ahref="#">About</a></li>
<li><ahref="#">Work</a></li>
<li><ahref="#">Contact</a></li>
</ul>
</nav>
.menu-list>li:before{
content:'2022';
padding-right:0.5em;
margin-left:0.5em;
}
.menu-list>li:first-child:before{
content:none;
}

16. Cleaner wayusing“+” combinator
<navclass="menu"role="navigation">
<ulclass="menu-list">
<li><ahref="#">Home</a></li>
<li><ahref="#">About</a></li>
<li><ahref="#">Work</a></li>
<li><ahref="#">Contact</a></li>
</ul>
</nav>
.menu-list>li+li:before{
content:'2022';
padding-right:0.5em;
margin-left:0.5em;
}
Check outthe for exampleCodePen

17. ATTRIBUTE SELECTORS (LEVEL 2 & 3)
elem[attr="value"] 2
elem[attr^="str"] 3
elem[attr$="str"] 3
elem[attr*="str"] 3
Fulllistof attribute selectors:
http://dev.w3.org/csswg/selectors4/#attribute-selectors

18. elem[attr="value"]
Since there are manydifferentinputelementtypes (especially
with HTML5) this selector is greatfor targetingspecific types.
input[type="text"],input[type="email"]{
border:1pxsolid#999;
padding:5px10px;
}
input[type="submit"]{
background-color:#0065BD;
color:#fff;
border-radius:10px;
padding:10px;
}

19. elem[attr^="str"]
Selects elements which have an attribute value beginningwith a
particular substring.
E.g. Stylinglinks with differentURLs:
Contact us by:
 Secure Form  Email

20. <sectionclass="contact">
<h4>Contactusby:</h4>
<ahref="https://secure.domain.com/contact">SecureForm</a>
<ahref="mailto:contact@hello.com">Email</a>
</section>
.contact>a:before{
font-family:'icomoon';
/*otherfontdeclarations*/
margin-right:0.25em;
}
.contact>a[href^="https://secure.domain.com"]:before{
content:"e602";
}
.contact>a[href^="mailto"]:before{
content:"e601";
}

21. elem[attr$="str"]
Selects elements which have an attribute value endingwith a
particular substring.
E.g. Stylinglinks to differentfile types:
Download file:
 PDF  Word

22. <sectionclass="file-download">
<h4>Downloadfile:</h4>
<ahref="http://domain.com/downloads/file.pdf">PDF</a>
<ahref="http://domain.com/downloads/file.doc">Word</a>
</section>
.file-download>a:before{
font-family:'icomoon';
/*otherfontdeclarations*/
margin-right:0.25em;
}
.file-download>a[href$=".pdf"]:before{
content:"e603";
}
.file-download>a[href$=".doc"]:before{
content:"e604";
}

23. elem[attr*="str"]
Selects elements which the substringsomewhere in the attribute
value.
Greatfor modular code. E.g. Stylingicon links with differenttypes
of icons:
Follow us:
 Twitter YouTube

24. <section class="social">
<h4>Follow us:</h4>
<a class="social-link" href="#"><i class="icon-font-twitter"></i>Twitter</a>
<a class="social-link" href="#"><i class="icon-sprite-youtube"></i>YouTube</a>
</section>
i[class*="icon-"]{
display:inline-block;
}
i[class*="icon-font-"]:before{
font-family:'icomoon';
/*otherfontdeclarations*/
}
.icon-font-twitter:before{
content:"e606";
}
i[class*="icon-sprite-"]{
background:url(lib/images/icon-sprite.png)no-repeat;
/*otherspritedeclarations*/
}
.icon-sprite-youtube{
width:24px;
height:28px;
background-position:00;
}
.social-link:hover>.icon-sprite-youtube{
background-position:0-28px;
}

25. LEVEL 3 & 4 SELECTOR HIGHLIGHTS
Structural nth-child()/ nth-of-type() 3
Logical :not(), :matches() 3/4
Relational :has() 4

26. :nth-child()
Now in Level3 we can choose anychild of acontainingelement.
Heard ’round Springfield
Fulldemo and code

27. HTML:
<sectionclass="character-list">
<articleclass="charsimpsons">
<ahref="#">
<imgsrc="homer-simpson.jpg"><q>...</q>
</a>
</article>
<articleclass="charflandereses">
<ahref="#">
<imgsrc="maude-flanders.jpg"><q>...</q>
</a>
</article>
<articleclass="charbouviers">
<ahref="#">
<imgsrc="selma-bouvier.jpg"><q>...</q>
</a>
</article>
...
</section>

28. Defaultpositioningof quote bubble:
.char{
position:relative;
}
.charq{
position:absolute;
top:-70%;
left:-50%;
/*otherstyles*/
}
.charq:before,.charq:after{
position:absolute;
/*otherstyles*/
}
.charq:before{
right:50%;
bottom:-30px;
/*otherstyles*/
}
.charq:after{
right:52%;
bottom:-50px;
/*otherstyles*/
}

29. nth-child()positioningof quote bubble:
/*Left-mostcolumn*/
.char:nth-child(6n+1)q{
left:-100%;
}
.char:nth-child(6n+1)q:after{
right:45%;
}
/*2ndcolumninfromleft*/
.char:nth-child(6n+2)q{
left:-85%;
}
.char:nth-child(6n+2)q:after{
right:40%;
}
/*Right-mostcolumn*/
.char:nth-child(6n+6)q{
left:20%;
}
.char:nth-child(6n+6)q:before{
right:50%;
}
.char:nth-child(6n+6)q:after{
right:60%;
}

30. :nth-child()
We getproblems if we mix elementtypes.
SIMPSONS
FLANDERESES

31. HTML:
<sectionclass="character-list">
<h4class="section-title">Simpsons</h4>
<articleclass="charsimpsons">
<ahref="#">
<imgsrc="homer-simpson.jpg"><q>...</q>
</a>
</article>
...
<h4class="section-title">Flandereses</h4>
<articleclass="charflandereses">
<ahref="#">
<imgsrc="ned-flanders.jpg"><q>...</q>
</a>
</article>
...
</section>

32. Fixed with :nth-of-type()
SIMPSONS
FLANDERESES
Fulldemo and code

33. nth-of-type()positioningof quote bubble:
/*Left-mostcolumn*/
.char:nth-of-type(6n+1)q{
left:-100%;
}
.char:nth-of-type(6n+1)q:after{
right:45%;
}
/*2ndcolumninfromleft*/
.char:nth-of-type(6n+2)q{
left:-85%;
}
.char:nth-of-type(6n+2)q:after{
right:40%;
}
/*Right-mostcolumn*/
.char:nth-of-type(6n+6)q{
left:20%;
}
.char:nth-of-type(6n+6)q:before{
right:50%;
}
.char:nth-of-type(6n+6)q:after{
right:60%;
}

34. :not(s)& :not(s1[, s2]*)
As of Level3 we can exclude an element(s) from selections.
When Level4 is supported :not()willtake aselector list.

35. <sectionclass="character-list">
<articleclass="charsimpsons">
<ahref="#">
<imgsrc="homer-simpson.jpg"><q>...</q>
</a>
</article>
<articleclass="charflandereses">
<ahref="#">
<imgsrc="maude-flanders.jpg"><q>...</q>
</a>
</article>
<articleclass="charbouviers">
<ahref="#">
<imgsrc="selma-bouvier.jpg"><q>...</q>
</a>
</article>
</section>
.char:not(.simpsons)img{
opacity:0.3;
}
.char:not(.simpsons)q{
display:none;
}

36. :matches(s1[, s2]*)
When supported :matches()willallow us to include aselector
or group of selectors in the selection.

37. Previous slide uses the vendor prefixed selector to simulate what
:matches()willdo. :matches()is currently not supportedin browsers I’ve
tested. Note:I wouldnot recommendusing the :any()selector as it’s on its way
out.
:any()
/*Using:matches()-STANDARDbutnosupportyet*/
.char:matches(.simpsons,.flandereses)img{
border-color:#0065BD;
}
/*Usingvendorprefixed:any()-NON-STANDARD*/
.char:-moz-any(.simpsons,.flandereses)img{
border-color:#0065BD;
}
.char:-webkit-any(.simpsons,.flandereses)img{
border-color:#0065BD;
}
/*Usingclasses*/
.simpsonsimg,.flandersimg{
border-color:#0065BD;
}

38. One usefulapplication of :matches()wouldbe for styling HTML5 headings.
Since the document outline has been revisedyou can have multiple h1s on a page.
Example CSSfrom MDN doing it the looong way:
/*Level0*/
h1{
font-size:30px;
}
/*Level1*/
sectionh1,articleh1,asideh1,navh1{
font-size:25px;
}
/*Level2*/
sectionsectionh1,sectionarticleh1,sectionasideh1,sectionnavh1,
articlesectionh1,articlearticleh1,articleasideh1,articlenavh1,
asidesectionh1,asidearticleh1,asideasideh1,asidenavh1,
navsectionh1,navarticleh1,navasideh1,navnavh1,{
font-size:20px;
}
/*Level3*/
/*...don'teventhinkaboutit*/

39. When :matches()is supported:
/*Level0*/
h1{
font-size:30px;
}
/*Level1*/
:matches(section,article,aside,nav)h1{
font-size:25px;
}
/*Level2*/
:matches(section,article,aside,nav)
:matches(section,article,aside,nav)h1{
font-size:20px;
}
/*Level3*/
:matches(section,article,aside,nav)
:matches(section,article,aside,nav)
:matches(section,article,aside,nav)h1{
font-size:15px;
}

40. :has(rs1[, rs2]*)
Apparently newthis year. When supportedthe :has()relationalpseudo will
allowus to select for elements which have a particular relationship to the
element(s) passedas parameters.
Examples from W3C spec:
Matchesonly a elementsthatcontainanimg child:
a:has(>img)
Matchesa dtelementimmediately followedby anotherdtelement:
dt:has(+dt)
Matchessectionelementsthatdon’tcontainany heading elements:
section:not(:has(h1,h2,h3,h4,h5,h6))

41. NEED TO SUPPORT OLDER IE VERSIONS?
is JS polyfillfor Level3 selectors.Selectivzr

42. SELECTOR PERFORMANCE

43. SOME CONSIDERATIONS
Browsers read selectors from right toleft
Ideallywantright-most“key” selector to be specific
IDs and classes are mostefficient
Combinators (descendant, child, etc), attributes, pseudo-
classes are notas efficient
I know whatyou are thinking...

44. OTHER CONSIDERATIONS
. willbe dead soon. Browsers are much
better than theyused to be!
You should probablyfocus on other web performance best
practices first(e.g. minimizing, usingfonts/SVGor sprites,
optimizingimage file sizes, CDNs, caching, etc.)
There isn’tone solution–differentwebsites require different
strategies
Focus on maintainability...
IE6 is dead IE7 and 8

45. MAKING YOUR CSS MORE MAINTAINABLE
Don’ttagqualifyid or class selectors
Don’t“over-qualify” selectors
Minimize selector depth
Minimize generaldescendant/child selectors
Modularize code
Choose anaming/codingconvention (SMACSS, BEM, etc.)
Decidewhat level of CSSefficiencyis right for your site.

46. DON’T TAG QUALIFY ID OR CLASS SELECTORS
/*Qualified*/
div#main-content{}
ul.menu-list{}
/*Unqualified*/
#main-content{}
.menu-list{}
ISSUES
Selectors tied to particular mark up pattern
Increasingselector specificity

47. DON’T “OVER-QUALIFY” SELECTORS
/*Over-qualified*/
.navullia{}
/*Better*/
.nava{}
ISSUES
Browsers willneed to look up documenttree anyways. Adding
uland linotnecessary
Increasingselector specificity

48. MINIMIZE SELECTOR DEPTH
/*Notgreat*/
.contentsectionullia{}
/*Betterchoices-Addclass"list"toul*/
.list>li>a{}
.lista{}
The keyis we reduced the number of levels the browser has to
walk up.
Alternatives?Putclass on lior individualaelements. Better
efficiencybutatcostof maintenance?

49. MINIMIZE GENERAL DESCENDANT/CHILD
SELECTORS
Especiallyinvolvinguniversalselector. E.g.:
#main-contentsection{}
ulli{}
.nav>*{}
Alternatives?Can you use classes?Better mark up?

50. MODULARIZE CODE
Keeps selector depth low
Greatfor portabilitywith minimalCSS revisions
CSS preprocessors make modularizingeasy. Create different
partialfile for each module.
<article class="news-item">
<h2 class="news-item-title">Title of Article</h2>
<a href="#"><img class="news-item-thumb" src="" alt=""></a>
<p class="news-item-excerpt">Excerpt</p>
</article>
.news-item{} /*modulebaseclass*/
.news-item-title{}
.news-item-thumb{}
.news-item-excerpt{}

51. THANK YOU FOR LISTENING! QUESTIONS?
AdditionalResources