Selectors*#lake.seanav#only p#s:visited.last-item:hovera.caption:link #catch*:hover + p.salty#coverul#first-item > livar ~ addressp[id]#sin[rel="next"]img.pink[title*="hot"]a[href^="https"]img[src$=".png"]ul[class~="except"]input[type=radio]:checked,buttoninput[type=text]:hover.carousel:not(.long)p::first-line,li:first-line* > li::first-letter, i:first-letterli:before,li:after

a:first-childdiv#lists ul:first-child > li:last-childp:only-childb:only-of-typei:first-of-typeli:nth-child(4)a:nth-last-child(5).item:nth-of-type(1).item.red:nth-last-of-type(9)tr:nth-child(2n)tr:nth-child(3n+1)li:nth-of-type(odd)i:empty:afterinput:enabledtextarea:disableddiv:target

Priorities6. *

5. ab:first-letter

4. [href$=".html"].testya:visited

3. #name_of_id2. style="margin:0;"

1. !important

* 0 0 0 0 0 1 1li 0 0 0 0 1 0 10li:first-line 0 0 0 0 2 0 20ul li 0 0 0 0 2 0 20ul > li 0 0 0 0 2 0 20

ul ol+li 0 0 0 0 3 0 30h1 + *[rel=up] 0 0 0 1 1 1 111ul ol li.red 0 0 0 1 3 0 130

li.red ul ol 0 0 0 1 3 0 130li.red.level 0 0 0 2 1 0 210#x34y 0 0 1 0 0 0 1000style="" 0 1 0 0 0 0 10000

1 2 3 4 5 6

Performance1. #header2. .promo3. div4. h2 + p5. li > ul6. ul a7. *8. [type="text"]9. a:hover

every selector is parsed from the end to the begin

better worse

#big ul#big

#all-links .link #all-links *

.link li.link

p b .big-a p b.big a

$('#big').find('a') $('#big a')

$('.in').filter('p') $('p.in')

$('#my').children('a') $('#my > a')the same is mostly applicable to jQuery selectors

https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirectlocale=en-US&redirectslug=Writing_Efficient_CSS