Elke keer dat we CSS gebruiken, gebruiken we selectors. Maar desondanks zijn CSS-selectors een van de meer verwaarloosde delen van de specificatie.
We praten over de grote transformaties in CSS3 maar vergeten maar al te vaak de basis. Goed gebruik van selectors maakt onze dagelijkse codering eenvoudiger en eleganter. Vandaag ga ik de 10 selectors behandelen die ons vaak voor de gek houden, maar beide zijn effectief en zeer nuttig.
De * selector kan degene zijn die je het makkelijkst onthoudt, maar deze is vaak onderbenut. Wat het doet is stijl alles op de pagina en het is geweldig voor het maken van een reset en ook voor het maken van sommige pagina-standaardinstellingen, zoals de lettertypefamilie en -grootte die u wenst te hebben.
* {margin: 0;padding: 0;font-family: helvetica, arial, sans-serif;font-size: 16px;}Deze selector wordt een aangrenzende selector genoemd en wat hij doet, selecteert het element dat zich onmiddellijk na het eerste element bevindt. Als je de eerste div na onze header zou willen selecteren, typ je:
header + div {margin-top: 50px;}Deze selector selecteert alleen de directe kinderen in tegenstelling tot AB die elk niveau kinderen van A zullen selecteren . Deze selector wordt aanbevolen voor wanneer u werkt met kinderen van het eerste niveau van een bovenliggend element. Bijvoorbeeld als u de items op het eerste niveau wilt selecteren in een ongeordende lijst die er als volgt uitziet:
- List Item With ul
- Sub list item
- Sub list item
- Sub list item
- List Item
- List Item
U zou deze selector gebruiken omdat de gebruikelijke AB- selector ook de lijstitems binnen de genestelde ongeordende lijst zal selecteren
ul > li {background: black;color: white;}Dit is echt een goede selector voor wanneer je een bepaalde link op een andere manier wilt stylen, wat dan ook tussen aanhalingstekens zal worden vergeleken met de href van de link. Bijvoorbeeld om alle links naar Facebook te stijlen met de kleur blauw die je zou gebruiken:
a[href*="facebook"] {color: blue;}Er is ook een versie zonder de * die overeenkomt met de exacte URL die u kunt gebruiken voor exacte links.
Deze selector is vooral nuttig vanwege de negatieclausule waarmee je een willekeurige groep elementen kunt selecteren die niet overeenkomen met wat je in B plaatst . Als je elke div wilt selecteren behalve de footer die je nodig hebt:
div:not(.footer) {margin-bottom: 40px;}Met het eerste kind en het laatste kind kunnen we het eerste en laatste kind van het bovenliggende element selecteren. Dit kan een grote hulp zijn als het gaat om lijstitems en het verwijderen van het marge-recht of de randen. Om de rand in het eerste lijstitem en de marge in het laatste lijstitem te verwijderen, hebt u het volgende nodig:
ul li:first-child {border: none;}ul li:last-child {margin-right: 0px;}Het n-de-kind is een eenvoudige manier om elk kind van een element te selecteren op basis van zijn volgorde. Als u bijvoorbeeld het derde lijstitem in een ongeordende lijst wilde hebben, zou dit de manier zijn om te gaan:
ul li:nth-child(3) {background: #ccc;}We kunnen nth-child gebruiken om elke vermenigvuldiger van een getal te selecteren met behulp van de variabele n, bijvoorbeeld als we 3n plaatsen, dan zou het het lijstitemnummer 3, 6, 9, 12 enzovoorts selecteren.
Het n-de-laatste-kind werkt als het n-de-kind, maar in plaats van het eerste lijstitem te tellen begint het vanaf de vorige te tellen, dus als u het met de nummer twee gebruikt, zal het het lijstitem selecteren dat vóór de laatste komt en het gebruik ervan is net als de n-de-kind-selector:
ul li:nth-last-child(2) {background: #ccc;}Deze selector doet precies wat u denkt dat het doet; het ziet welk type element je erop plaatst en het selecteert bijvoorbeeld het derde element op je pagina dat overeenkomt met wat je hebt getypt. Voor het selecteren van de derde alinea in een div zou je gebruiken:
div p:nth-of-type(3) {font-style: italic;}Ooit opgevallen dat wanneer u op Google naar iets zoekt, de pagina's die u al hebt gezien in een andere kleur verschijnen? Dat is precies wat bezocht heeft. Dit is een geweldige toevoeging voor de gebruikers, maar het is soms vergeten en volgens mijn ervaring is het handig elke keer dat ik op Google zoek.
a:visited {color: blue;}In mijn ervaring met het gebruik van dit soort selectors, kan het coderen ons veel tijd besparen en ook de noodzaak vermijden dat een heleboel ID's onze markup overrompelen. En dit is nog maar het begin van CSS selectors, er zijn veel meer selectors die echt handig zijn maar soms vergeten.
Gebruik je CSS selectors in je stylesheets? Is het gemakkelijker om terug te vallen op ID's en klassen? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, code afbeelding via Shutterstock.