CSS Master

Figure 1.26. A comments section with a yellow background YoucanuseanycombinationofCSSwith:target,whichopensupsomefun possibiliti ...

</li> <li id="tab2"> <p>This is tab 2</p> </li> <li id="tab3"> <p>This is tab 3.</p ...

Figure 1.27. Using the :target selector to create tabs sans JavaScript Improving Accessibility Amoreaccessibleversionmightalsous ...

01-selectors/pseudo-class-target.html (excerpt) <form method="post" action="#"> <h1>Join the Cool Kids Club</h1&g ...

label:not(.label-radio) { font-weight: bold; display:block; } Figure 1.28. Using the :not() pseudo class to style form labels He ...

input:not([type=radio]){ ... } input:not([type=checkbox]) { ... } input:not([type=range]) {... } Instead,weneedtochainour:not()p ...

■ :first-child ■ :last-child ■ :only-child ■ :nth-child() ■ :nth-last-child() :first-child and :last-child Asyou’veprobablyguess ...

</ul> </body> </html> YoucanseewhatthislookslikeinFigure1.29. Figure 1.29. Using :first-child by itself matche ...

Figure 1.30. Qualifying :first-child and :last-child with a simple selector :nth-child() and :nth-last-child() Theabilitytoselec ...

Thatlastitemhasadegreeofcomplexity.We'llcomebacktoitinamoment. What’sthedifferencebetween:nth-child()and:nth-last-child()?Thesta ...

Figure 1.32. Counting starts from the bottom with :nth-last-child() Howabouttryingsomecomplexexamplesusingmorecomplexarguments?W ...

Figure 1.33. A document of 20 div elements With:nth-child()and:nth-last-child(),wecanselectasinglechildatapar- ticularposition.W ...

Figure 1.34. Using :nth-child() to select a single item by its index Butwhatifwewanttoselecteverythirdelement?Here’swheretheAn+B ...

Figure 1.35. Using An+B syntax to select every third element Here’swheremattersbecomealittlemoreinteresting.Wecanuse:nth-child() ...

Figure 1.36. Using the step An+B microsyntax to select items 8 through 20 Negative Offsets Negativeoffsetandrangevaluesarealsova ...

Figure 1.37. Selecting every third element, starting with the fifth :only-child The:only-childpseudo-classmatcheselementsiftheya ...

Figure 1.38. Matching elements with li:only-child :empty It’salsopossibletoselectelementsthathavenochildrenusingthe:emptypseudo- ...

Therearefivesuchpseudo-classeswithnamesthatmirrorthoseoftheiruntyped counterparts: ■ :first-of-type ■ :last-of-type ■ :only-of-t ...

p:first-of-type { background: #cddc39; } Thiswillmatcheverypelementthat’sthefirstpelementofitsparent,shownin Figure1.40. Figure ...

Figure 1.41. The :last-of-type pseudo-class matches the last element of a type Figure 1.42. Using p:only-of-type to match the on ...