Varje gång vi använder CSS använder vi selektorer. Men trots detta är CSS-väljare en av de mer försummade delarna av specifikationen.
Vi pratar om de stora omvandlingarna i CSS3 men glömmer alltför ofta grunderna. God användning av väljare gör vår dagliga kodning enklare och elegantare. Idag kommer jag att täcka de 10 väljare som ofta släpper våra sinnen men är både effektiva och mycket användbara.
Väljaren kan vara den som du minns lättast men det är ofta underutnyttjad. Vad det gör är att stile allt på sidan och det är perfekt för att skapa en återställning och även för att skapa några standardinställningar som typsnittfamiljen och storleken du vill ha.
* {margin: 0;padding: 0;font-family: helvetica, arial, sans-serif;font-size: 16px;}Denna väljare kallas en angränsande väljare och vad den gör är att välja det element som är direkt efter det första elementet. Om du ville välja den första div efter vår rubrik skulle du skriva:
header + div {margin-top: 50px;}Den här väljaren väljer bara de direkta barnen till skillnad från AB som väljer valda barn av A. Denna väljare rekommenderas för när du arbetar med barn på grundnivå i ett moderelement. Till exempel om du vill välja listnivåerna på första nivån i en oordnad lista som ser ut så här:
- List Item With ul
- Sub list item
- Sub list item
- Sub list item
- List Item
- List Item
Du skulle använda den här väljaren eftersom den vanliga AB- väljaren också kommer att välja listobjekten i den nestade, oordnade listan
ul > li {background: black;color: white;}Detta är en riktigt bra väljare för när du vill stila en viss länk på ett annat sätt, vad som helst i citat kommer att matchas mot href av länken. Till exempel för att stila alla länkar till facebook med färgen blå du skulle använda:
a[href*="facebook"] {color: blue;}Det finns också en version utan * som matchar den exakta webbadressen som du kan använda för exakta länkar.
Den här väljaren om den är särskilt användbar på grund av den negationsklausul som låter dig välja vilken grupp av element som inte matchar vad du placerar i B. Om du vill välja varje div utom den sidfot du behöver:
div:not(.footer) {margin-bottom: 40px;}Det första barnet och det sista barnet tillåter oss att välja det första och sista barnet i moderelementet. Detta kan vara till stor hjälp när det gäller listartiklar och borttagning av marginalrätten eller gränsen. För att ta bort gränsen i det första listobjektet och marginalen i det sista listobjektet du behöver:
ul li:first-child {border: none;}ul li:last-child {margin-right: 0px;}Det nth-barnet är ett enkelt sätt för dig att välja ett barn av ett element i sin order. Om du till exempel vill ha det tredje listobjektet i en oorderad lista skulle det vara vägen att gå:
ul li:nth-child(3) {background: #ccc;}Vi kan använda nth-barnet för att välja varje multiplikatorn av ett tal med hjälp av variabeln n, till exempel om vi sätter 3n skulle det välja listobjekt nummer 3, 6, 9, 12 och så vidare.
Det näst sista barnet fungerar som nth-barnet men i stället för att räkna det första listobjektet börjar det räkna från det sista, så om du använder det med nummer två väljer det listobjektet som kommer före den sista och dess användning är precis som nth-child selector:
ul li:nth-last-child(2) {background: #ccc;}Denna väljare gör precis vad du tycker det gör; Det ser vilken typ av element du lägger på det och det väljer till exempel det tredje elementet på din sida som matchar det du skrev. För att välja tredje stycket i en div skulle du använda:
div p:nth-of-type(3) {font-style: italic;}Har du någonsin märkt att när du söker efter någonting på google visas de sidor du redan sett i en annan färg? Det är precis vad besökaren gör. Detta är ett bra tillägg för användarna men det glöms ibland och av min erfarenhet är det till nytta varje gång jag söker på Google.
a:visited {color: blue;}I min erfarenhet med hjälp av dessa typer av väljare när kodning kan spara oss mycket tid och också undvika behovet av en hel del ID sörjer upp vår uppmärksamhet. Och detta är bara början på CSS-selektorerna, det finns många fler selektörer som är väldigt praktiska men ibland glömda.
Användar du CSS-väljare i dina stilark? Är det lättare att komma tillbaka på ID och klasser? Låt oss veta i kommentarerna.