Hver gang vi bruger CSS bruger vi selektorer. Men på trods af dette er CSS-selektorer en af de mere forsømte dele af specifikationen.
Vi taler om de store transformationer i CSS3, men glemmer alt for ofte det grundlæggende. God brug af selektorer gør vores daglige kodning enklere og mere elegant. I dag skal jeg dække de 10 selektorer, der ofte slipper vores sind, men er både effektive og meget nyttige.
Selektoren kan være den, du husker mest, men det er ofte underudnyttet. Hvad det gør er at stil alt på siden, og det er fantastisk til at oprette en nulstilling og også for at skabe nogle standardindstillinger som skrifttypefamilien og den størrelse, du ønsker at have.
* {margin: 0;padding: 0;font-family: helvetica, arial, sans-serif;font-size: 16px;}Denne vælger kaldes en tilstødende vælger, og hvad den gør er at vælge det element, der er umiddelbart efter det første element. Hvis du ønskede at vælge den første div efter vores overskrift, ville du skrive:
header + div {margin-top: 50px;}Denne vælger vælger kun de direkte børn i modsætning til AB , der vælger ethvert niveau børn af A. Denne vælger anbefales til, når du arbejder med første niveau børn af et overordnet element. Hvis du f.eks. Vil vælge listelisten på første niveau i en uordnet liste, der ser sådan ud:
- List Item With ul
- Sub list item
- Sub list item
- Sub list item
- List Item
- List Item
Du vil bruge denne vælger, fordi den sædvanlige AB- vælger også vil vælge listeposterne inde i den indlejrede, uordnede liste
ul > li {background: black;color: white;}Dette er en rigtig god vælger til, når du vil style et bestemt link på en anden måde, hvad der endes i citater, vil blive matchet mod linket href. For eksempel at style alle links til facebook med den farve blå du ville bruge:
a[href*="facebook"] {color: blue;}Der er også en version uden *, der matcher den nøjagtige webadresse, du kan bruge til nøjagtige links.
Denne vælger, hvis den er særlig nyttig på grund af dens negationsklausul, som giver dig mulighed for at vælge en hvilken som helst gruppe af elementer, der ikke passer til det, du placerer i B. Hvis du vil vælge hver div, undtagen den footer du bare har brug for:
div:not(.footer) {margin-bottom: 40px;}Det første barn og sidste barn giver os mulighed for at vælge det første og sidste barn i overordnet element. Dette kan være en stor hjælp, når det kommer til lister og fjerner margen-højre eller grænser. For at fjerne grænsen i det første listepost og margen i det sidste listepost, du har brug for:
ul li:first-child {border: none;}ul li:last-child {margin-right: 0px;}Nth-barnet er en enkel måde at vælge ethvert barn af et element ved sin ordre. Hvis du for eksempel ønskede den tredje liste i en uordnet liste, ville det være vejen at gå:
ul li:nth-child(3) {background: #ccc;}Vi kan bruge nth-barn til at vælge hver multiplikator af et tal ved hjælp af variablen n, for eksempel hvis vi sætter 3n, ville det vælge listepost nummer 3, 6, 9, 12 og så videre.
Det nt-sidste barn fungerer som nth-barnet, men i stedet for at tælle det første listestykke begynder det at tælle fra sidst, så hvis du bruger det med nummer to, vælger det listeposten, der kommer før den sidste og dets brug er ligesom nth-barnet vælger:
ul li:nth-last-child(2) {background: #ccc;}Denne vælger gør præcis hvad du synes det gør; det ser, hvilken type element du har lagt på det, og det vælger for eksempel det tredje element på din side, der svarer til det, du skrev. For at vælge det tredje afsnit i en div, vil du bruge:
div p:nth-of-type(3) {font-style: italic;}Har du nogensinde bemærket, at når du søger efter noget på google, vises de sider, du allerede har set, i en anden farve? Det er netop det besøgte gør. Dette er en fantastisk tilføjelse til brugerne, men det er nogle gange glemt, og det er efter min mening nyttigt hver gang jeg søger google.
a:visited {color: blue;}I min erfaring ved hjælp af disse typer selektorer, når kodning kan spare os meget tid og også undgå behovet for en masse ID'er cluttering op vores markup. Og dette er kun begyndelsen på CSS-selektorer, der er mange flere selektorer, der er virkelig nyttige, men nogle gange glemt.
Bruger du CSS selectors i dine stilark? Er det nemmere at falde tilbage på id'er og klasser? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, kode billede via Shutterstock.