Hver gang vi bruker CSS, bruker vi selektorer. Men til tross for dette er CSS-selektorer en av de mer forsømte deler av spesifikasjonen.

Vi snakker om de store transformasjonene i CSS3, men altfor ofte glemmer grunnleggende. God bruk av selektorer gjør vår daglige koding enklere og mer elegant. I dag skal jeg dekke de 10 seleksjonene som ofte slipper våre tanker, men er både effektive og svært nyttige.

*

Selektoren kan være den du husker mest, men det er ofte utilgjengelig. Hva det gjør er å stil alt på siden, og det er flott å lage en tilbakestilling, og også for å lage noen sideverdier som skrifttypefamilien og størrelsen du ønsker å ha.

* {margin: 0;padding: 0;font-family: helvetica, arial, sans-serif;font-size: 16px;}

A + B

Denne velgeren kalles en tilgrensende väljare, og hva den gjør er å velge elementet som er umiddelbart etter det første elementet. Hvis du ønsket å velge den første div etter vår overskrift, ville du skrive:

header + div {margin-top: 50px;}

A> B

Denne velgeren vil bare velge de direkte barna i motsetning til AB som vil velge noen nivå barn av A. Denne velgeren anbefales for når du arbeider med barn i første klasse av et foreldreelement. For eksempel hvis du vil velge listene i første nivå i en uordnet liste som ser slik ut:

  • List Item With ul
    • Sub list item
    • Sub list item
    • Sub list item
  • List Item
  • List Item

Du vil bruke denne väljeren fordi den vanlige AB- väljeren også vil velge listepostene i den nestede, uordnede listen

ul > li {background: black;color: white;}

A [href * =”eksempel”]

Dette er en veldig god valg for når du vil stil en bestemt lenke på en annen måte, hva som helst i anførselstegn vil bli matchet mot href av lenken. For eksempel for å stil alle lenker til facebook med fargen blå du vil bruke:

a[href*="facebook"] {color: blue;}

Det finnes også en versjon uten * som matcher den eksakte nettadressen du kan bruke til eksakte koblinger.

A: (B)

Denne velgeren hvis det er spesielt nyttig på grunn av det er negasjonsklausulen som lar deg velge hvilken gruppe av elementer som ikke samsvarer med det du plasserer i B. Hvis du vil velge hver div, bortsett fra bunnteksten du bare trenger:

div:not(.footer) {margin-bottom: 40px;}

A: første barn / A: siste barn

Det første barnet og det siste barnet tillater oss å velge foreldreelementets første og siste barn. Dette kan være en stor hjelp når det gjelder listeposter og fjerning av margin-høyre eller grenser. For å fjerne grensen i det første listeposten og marginen i det siste listeposten du trenger:

ul li:first-child {border: none;}ul li:last-child {margin-right: 0px;}

A: n-te-barn (n)

Nth-barnet er en enkel måte for deg å velge ethvert barn av et element etter sin bestilling. Hvis du for eksempel ønsket det tredje elementet i en uordnet liste, ville dette være veien å gå:

ul li:nth-child(3) {background: #ccc;}

Vi kan bruke nth-barn til å velge hver multiplikator av et tall ved å bruke variablen n, for eksempel hvis vi setter 3n, vil det velge listepost nummer 3, 6, 9, 12 og så videre.

A: n-te-siste-barn (n)

Det nest-siste barnet fungerer som nth-barnet, men i stedet for å telle skjemaet den første listeposten begynner det å telle fra det siste, så hvis du bruker det med nummer to, vil det velge listen elementet som kommer før den siste og dens bruk er akkurat som nth-barnselgeren:

ul li:nth-last-child(2) {background: #ccc;}

A: n-te-of-type (n)

Denne velgeren gjør akkurat det du tror det gjør; det ser hvilken type element du har lagt på det, og det velger for eksempel det tredje elementet på siden din som samsvarer med det du skrev inn. For å velge det tredje avsnittet i en div vil du bruke:

div p:nth-of-type(3) {font-style: italic;}

A: visited

Har du noen gang lagt merke til at når du søker etter noe på google, vises sidene du allerede har sett i en annen farge? Det er akkurat det besøkte gjør. Dette er et flott tillegg for brukerne, men det er noen ganger glemt, og etter min erfaring er det praktisk når jeg søker google.

a:visited {color: blue;}

Siste tanker

I min erfaring ved å bruke slike typer selektorer når koding kan spare oss mye tid og også unngå behovet for mye ID, cluttering opp vårt oppslag. Og dette er bare begynnelsen på CSS-valgene, det er mange flere selektorer som er veldig nyttige, men noen ganger glemt.

Bruker du CSS selectors i stilarkene dine? Er det lettere å falle tilbake på ID og klasser? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde, kode bilde via Shutterstock.