DE 30 CSS Velgere Du Må Huske

Lær CSS: The Complete Guide

Vi har bygget en komplett guide for å hjelpe deg å lære CSS, enten du bare komme i gang med det grunnleggende eller du ønsker å utforske mer avansert CSS.

CSS Velgere

så du lærte basen id, class og descendant velgere—og så kalte det en dag? I så fall går du glipp av en enorm grad av fleksibilitet. Du skylder deg selv å forplikte disse avanserte CSS og CSS3 velgere til minne.

Grunnleggende Velgere

1. *

* { margin: 0; padding: 0;}

La oss slå de åpenbare ut, for nybegynnere, før vi går videre til de mer avanserte selektorer.

stjernesymbolet retter seg mot hvert enkelt element på siden. Mange utviklere vil bruke dette trikset til null ut margin s og padding. Selv om dette er sikkert greit for raske tester, vil jeg råde deg til aldri å bruke dette i produksjonskode. Det legger for mye vekt på nettleseren, og er unødvendig.

* kan også brukes med barnevelgere.

#container * { border: 1px solid black;}

dette vil målrette mot hvert enkelt element som er et barn av #container div. Igjen, prøv å ikke bruke denne teknikken veldig mye, om noen gang.

2. # X

#container { width: 960px; margin: auto;}

Prefiksering av hash-symbolet til en velger tillater oss å målrette ved id. Dette er lett den vanligste bruken; men vær forsiktig når du bruker id velgere.

Spør deg selv: må jeg absolutt bruke en id til dette elementet for å målrette det?

id velgere er stive og tillater ikke gjenbruk. Hvis mulig, prøv først å bruke et kodenavn, et AV DE nye HTML5-elementene, eller til og med en pseudoklasse.

3. .X

.error { color: red;}

Dette er en class – velger. Forskjellen mellom ids og class es er at med sistnevnte kan du målrette mot flere elementer. Bruk class es når du vil at stylingen skal gjelde for en gruppe elementer. Alternativt kan du bruke id s for å finne en nål i en høystakk, og stil bare det bestemte elementet.

4. X

a { color: red; }ul { margin-left: 0; }

hva om du vil målrette mot alle elementene på en side, i henhold til deres type, i stedet for et id eller classnavn? Hold det enkelt, og bruk en typevelger. Hvis du trenger å målrette mot alle uordnede lister, bruker du ul {}.

Live Demo Av Grunnleggende Velgere

Kombinator Velgere

5. X Y

li a { text-decoration: none;}

den nest vanligste velgeren er descendant velgeren. Når du trenger å være mer spesifikk med dine velgere, bruker du disse. For eksempel, hva om, i stedet for å målrette mot alle ankerkoder, trenger du bare å målrette ankrene som er innenfor en uordnet liste? Dette er spesielt når du vil bruke en etterkommer velgeren.

Pro-tip: hvis velgeren din ser ut som X Y Z A B.error, gjør du det feil. Spør alltid deg selv om det er absolutt nødvendig å bruke all den vekten.

6. X + Y

ul + p { color: red;}

dette refereres til som en tilstøtende velger. Det vil bare velge elementet som umiddelbart foregår av det tidligere elementet. I dette tilfellet vil bare første ledd etter hver ul ha rød tekst.

7. X > Y

div#container > ul { border: 1px solid black;}

forskjellen mellom standarden X Y og X > Y er at sistnevnte bare vil velge direkte barn. For eksempel, vurder følgende markering.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

en velger av #container > ulvil bare målrette mot ul s som er direkte barn av div med en id av container. Det vil ikke målrette for eksempel ul som er et barn av den første li.

av denne grunn er det ytelsesfordeler ved bruk av barnekombinatoren. Faktisk anbefales det spesielt når du arbeider med JavaScript-baserte CSS-velgermotorer.

8. X ~ Y

ul ~ p { color: red;}

denne søskenkombinatoren ligner X + Y, men den er mindre streng. Mens en tilstøtende velger (ul + p) bare vil velge det første elementet som umiddelbart foregår av den tidligere velgeren, er denne mer generalisert. Det vil velge, med henvisning til vårt eksempel ovenfor, noen p elementer, så lenge de følger en ul.

Live Demo Av Combinator Velgere

Attributt Velgere

9. X

a { color: green;}

Referert til som en attributtvelger, i vårt eksempel ovenfor, vil dette bare velge ankerkodene som har et title – attributt. Anker koder som ikke vil ikke motta denne spesielle styling. Men hva om du trenger å være mer spesifikk? Sjekk ut neste eksempel!

10. X

a { color: #83b348; /* Envato green */}

tekstutdrag ovenfor vil stil alle anker koder som lenker til https://code.tutsplus.com; de vil motta vår merkede grønne farge. Alle andre ankerkoder vil forbli upåvirket.

Merk at vi pakker inn verdien i anførselstegn. Husk å også gjøre dette når du bruker En JavaScript CSS velgermotor. Når det er mulig, alltid bruke CSS3 velgere enn uoffisielle metoder.

dette fungerer bra, selv om Det er litt stivt. Hva om lenken faktisk direkte til Envato Tuts+, men kanskje banen er code.tutsplus.com i stedet for HELE NETTADRESSEN? I slike tilfeller kan vi bruke litt av regulære uttrykks syntaks.

11. X

a { color: #83b348; /* Envato green */}

Der går vi; det er det vi trenger. Stjernen angir at fortsetter verdien må vises et sted i attributtets verdi. På den måten dekker dette tutsplus.com, code.tutsplus.com og selv webdesign.tutsplus.com.

Husk at dette er en bred uttalelse. Hva om ankerkoden koblet til noe ikke-Envato-nettsted med strengen tutsplus i NETTADRESSEN? Når du trenger å være mer spesifikk, bruk ^ og $, for å referere til begynnelsen og slutten av en streng, henholdsvis.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

Noen gang lurt på hvordan noen nettsteder kan vise et lite ikon ved siden av koblingene som er eksterne? Jeg er sikker på at du har sett disse før; de er fine påminnelser om at linken vil lede deg til et helt annet nettsted.

Dette er en smal sak med karat-symbolet. Det er mest brukt i regulære uttrykk for å angi begynnelsen av en streng. Hvis vi vil målrette mot alle ankerkoder som har en href som begynner med http, kan vi bruke en velger som ligner på koden som er vist ovenfor.

Legg Merke til at vi ikke søker etter https://; det er unødvendig, og tar ikke Hensyn Til Nettadressene som begynner med https://.

nå, hva om vi ønsket å i stedet stil alle ankre som lenker til, si, et bilde? I disse tilfellene, la oss søke etter slutten av strengen.

13. X

a { color: red;}

Igjen bruker vi et regulært uttrykkssymbol, $, for å referere til enden av en streng. I dette tilfellet søker vi etter alle ankre som lenker til et bilde-eller I det minste EN URL som slutter med .jpg. Husk at DETTE ikke vil fange GIF og PNG-bilder.

14. X

a { color: red;}

hvordan kompenserer vi for alle de forskjellige bildetypene? Vel, vi kunne lage flere velgere, for eksempel:

a,a,a,a { color: red;}

Men det er en smerte,og det er ineffektivt. En annen mulig løsning er å bruke egendefinerte attributter. Hva om vi la til vår egen data-filetype attributt til hvert anker som lenker til et bilde?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

da, med den kroken på plass, kan vi bruke en standard attributter velger å målrette bare de ankere.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

her er en spesiell en som vil imponere vennene dine. Ikke så mange vet om dette trikset. Tilde-symbolet (~) lar oss målrette mot et attributt som har en plass-separert liste over verdier.

Går sammen med vår tilpassede attributt fra nummer 15, ovenfor, kan vi opprette en data-info attributt, som kan motta en plass-separert liste over alt vi trenger å gjøre oppmerksom på. I dette tilfellet vil vi notere eksterne lenker og lenker til bilder-bare for eksemplet.

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

med den markeringen på plass, kan vi nå målrette mot noen koder som har en av disse verdiene, ved å bruke attributtene selector trick.

/* Target data-info attr that contains the value "external" */a { color: red;}/* And which contain the value "image" */a { border: 1px solid black;}

Ganske kjekk, ikke sant?

Live Demo Av Attributt Velgere

Pseudo Velgere

16. X: besøkt Og X:link

a:link { color: red; }a:visited { color: purple; }

vi bruker pseudoklassen :link for å målrette mot alle ankerkoder som ennå ikke er klikket på.

Alternativt har vi også pseudoklassen :visited, som, som du forventer, tillater oss å bruke spesifikk styling til bare ankerkodene på siden som har blitt klikket på, eller «besøkt».

17. X: merket

input:checked { border: 1px solid black;}

denne pseudoklassen retter seg bare mot et brukergrensesnittelement som er merket av—for eksempel en alternativknapp eller avkrysningsboks. Det er så enkelt som det.

18. X: etter

before og after pseudoklassene er flotte. Hver dag ser det ut til at folk finner nye og kreative måter å bruke dem effektivt på. De genererer bare innhold rundt det valgte elementet.

Mange ble først introdusert til disse klassene da de møtte clear-fix hack.

.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; }.clearfix { *display: inline-block; _height: 1%;}

dette hack bruker :after pseudo klasse for å legge et mellomrom etter elementet, og deretter fjerne det. Det er et utmerket triks å ha i verktøyposen, spesielt i tilfeller der overflow: hidden; – metoden ikke er mulig.

for en annen kreativ bruk av dette, se mitt raske tips om å lage skygger.

i Henhold TIL css3 Selectors-spesifikasjonen, bør du teknisk bruke pseudo-elementsyntaksen til to kolon ::. Men for å forbli kompatibel, vil brukeragenten godta en enkelt kolonbruk også.

19. X: hover

div:hover { background: #e3e3e3;}

Å kom igjen. Du kjenner denne. Den offisielle termen for dette er «user action pseudo class». Det høres forvirrende ut, Men det er det egentlig ikke. Vil du bruke spesifikk styling når en bruker svinger over et element? Dette vil få jobben gjort!

Husk at eldre versjoner Av Internet Explorer ikke svarer når pseudoklassen :hover brukes på noe annet enn en ankerkode.

du bruker oftest denne velgeren når du for eksempel bruker en border-bottom til ankerkoder når du svinger over.

a:hover { border-bottom: 1px solid black;}

Pro-tip: border-bottom: 1px solid black; ser bedre ut enn text-decoration: underline;.

20. X: ikke (velger)

div:not(#container) { color: blue;}

negasjon pseudo klassen er spesielt nyttig. La oss si at jeg vil velge alle div s, bortsett fra den som har en id på container. Snippet ovenfor vil håndtere den oppgaven perfekt.

Eller, hvis jeg ønsket å velge hvert enkelt element (ikke anbefalt) unntatt avsnittskoder, kunne vi gjøre:

*:not(p) { color: green;}

21. X:: pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

vi kan bruke pseudoelementer (betegnet med ::) til å style fragmenter av et element, for eksempel den første linjen eller den første bokstaven. Husk at disse må brukes på blokknivå elementer for å tre i kraft.

et pseudo-element består av to kolon: ::

Målrette Den Første Bokstaven I Et Avsnitt

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

denne kodebiten er en abstraksjon som finner alle avsnittene på siden, og deretter delmål bare den første bokstaven i elementet.

Dette brukes oftest til å lage avislignende styling for første bokstav i en artikkel.

Målretter Mot Den Første Linjen I Et Avsnitt

p::first-line { font-weight: bold; font-size: 1.2em;}

på Samme måte vil ::first-line pseudoelementet, som forventet, bare style den første linjen i elementet.

» for kompatibilitet med eksisterende stilark må brukeragenter også godta den forrige kolonnotasjonen for pseudo-elementer introdusert I CSS nivå 1 og 2 (nemlig, :first-line, :first-letter, :before og :after). Denne kompatibiliteten er ikke tillatt for de nye pseudo-elementene som er introdusert i denne spesifikasjonen.»- W3C Velgere Spesifikasjoner

Live Demo Av Pseudo Velgere

Nte Barn Og Type Velgere

22. X: n-barn (n)

li:nth-child(3) { color: red;}

Husk dagene da vi ikke hadde mulighet til å målrette mot bestemte elementer i en stabel? nth-child pseudoklassen løser det!

Vær oppmerksom på at nth-child godtar et heltall som parameter, men dette er ikke nullbasert. Hvis du ønsker å målrette mot det andre listeelementet, bruker du li:nth-child(2).

vi kan til og med bruke dette til å velge et variabelt sett med barn. For eksempel kan vi gjøre li:nth-child(4n) for å velge hvert fjerde listeelement.

23. X: n-siste-barn (n)

li:nth-last-child(2) { color: red;}

Hva om du hadde en stor liste over elementer i en ul, og du bare trengte å få tilgang til, si, det tredje til siste elementet? I stedet for å gjøre li:nth-child(397), kan du i stedet bruke nth-last-child pseudoklassen.

denne teknikken fungerer nesten identisk med nummer 16 ovenfor. Forskjellen er at den begynner på slutten av samlingen, og jobber seg tilbake.

24. X: nth-av-type (n)

ul:nth-of-type(3) { border: 1px solid black;}

Det vil være tider da, i stedet for å velge en child, må du i stedet velge i henhold til elementet type.

Tenk deg markering som inneholder fem uordnede lister. Hvis du bare ønsket å style den tredje ul, og ikke hadde en unik id å koble inn, kan du bruke nth-of-type(n) pseudoklassen. I koden ovenfor vil bare den tredje ul ha en kant rundt den.

25. X: nth-siste-av-type (n)

ul:nth-last-of-type(3) { border: 1px solid black;}

Og ja, for å forbli konsekvent, kan vi også bruke nth-last-of-type for å begynne på slutten av valglisten og jobbe oss tilbake for å målrette mot ønsket element.

26. X: første barn

ul li:first-child { border-top: none;}

denne strukturelle pseudoklassen tillater oss å målrette bare det første barnet til elementets foreldre. Du bruker ofte dette til å fjerne kantlinjer fra de første og siste listeelementene.

la oss for eksempel si at du har en liste over rader, og hver har en border-top og en border-bottom. Vel, med det arrangementet, vil det første og siste elementet i det settet se litt rart ut.

mange designere bruker klasser av first og last for å kompensere for dette. I stedet kan du bruke disse pseudoklassene.

27. X: siste barn

ul > li:last-child { color: green;}

det motsatte av first-child, last-child vil målrette mot det siste elementet i elementets overordnede.

last-child Selector Eksempel

La oss bygge et enkelt eksempel for å demonstrere en mulig bruk av disse klassene. Vi lager et stylet listeelement.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

for markeringen er det ikke noe spesielt: bare en enkel liste.

HER ER CSS:

ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0;}li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c;}

denne stylingen vil sette en bakgrunn, fjerne nettleserens standardpolstring på ul, og bruke grenser til hver li for å gi litt dybde.

hvis du vil legge til dybde i listene, bruker du en border-bottom på hver li som er en nyanse eller to mørkere enn li‘s bakgrunnsfarge. Deretter gjelder en border-top som er et par nyanser lysere.

det eneste problemet, som vist på bildet ovenfor, er at en ramme vil bli brukt på toppen og bunnen av den uordnede listen—som ser merkelig ut. La oss bruke pseudoklassene :first-child og :last-child for å fikse dette.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

Der går vi; det løser det!

28. X: bare barn

div p:only-child { color: red;}

Sannferdig vil du sannsynligvis ikke finne deg selv å bruke only-child pseudoklassen for ofte. Likevel, det er tilgjengelig, bør du trenger det.

den lar deg målrette elementer som er det eneste barnet til sin forelder. Hvis du for eksempel refererer til kodebiten ovenfor, vil bare avsnittet som er det eneste barnet i div bli farget rødt.

la oss anta følgende markering.

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

i dette tilfellet vil den andre div ‘s avsnitt ikke være målrettet; bare den første div. Så snart du bruker mer enn ett barn til et element, opphører pseudoklassen only-child å tre i kraft.

29. X: bare-av-type

li:only-of-type { font-weight: bold;}

denne strukturelle pseudoklassen kan brukes på noen smarte måter. Det vil målrette elementer som ikke har noen søsken i sin overordnede container. Som et eksempel, la oss målrette mot alle ul s som bare har et enkelt listeelement.

Først spør deg selv hvordan du vil utføre denne oppgaven. Du kan gjøre ul li, men dette vil målrette mot alle listeelementer. Den eneste løsningen er å bruke only-of-type.

ul > li:only-of-type { font-weight: bold;}

30. X: first-of-type

pseudoklassen first-of-type lar deg velge de første søsken av sin type.

En Test

for bedre å forstå dette, la oss få en test. Kopier følgende markering i kodeditoren din:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

nå, uten å lese videre, prøv å finne ut hvordan du bare målretter mot «Listeelement 2». Når du har funnet det ut (eller gitt opp), les videre.

Løsning 1

det finnes en rekke måter å løse denne testen på. Vi vurderer en håndfull av dem. La oss begynne med å bruke first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

denne teksten sier i hovedsak, for å finne den første uordnede listen på siden, så finn bare de nærmeste barna, som er listeelementer. Deretter filtrerer du det ned til bare det andre listeelementet i det settet.

Løsning 2

Et annet alternativ er å bruke den tilstøtende velgeren.

p + ul li:last-child { font-weight: bold;}

i dette scenariet finner vi ul som umiddelbart fortsetter p – taggen, og deretter finner du elementets aller siste barn.

Løsning 3

Vi kan være så motbydelige eller så lekne som vi vil med disse selektorene.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

denne gangen tar vi den første ul på siden, og finner deretter det aller første listeelementet, men starter fra bunnen!

Live Demo Av Nth Barn Og Type Velgere

Konklusjon

hvis du kompenserer for eldre nettlesere, Som Internet Explorer 6, må du fortsatt være forsiktig når du bruker disse nyere velgerne. Men vær så snill å ikke la det avskrekke deg fra å lære disse. Du gjør deg selv en bjørnetjeneste. Sørg for å referere her for en nettleser-kompatibilitetsliste. Alternativt kan Du bruke Dean Edwards utmerkede IE9.js script for å bringe støtte for disse velgere til eldre nettlesere.

For Det Andre, når du arbeider Med JavaScript-biblioteker, som den populære jQuery, alltid prøve å bruke disse innfødte CSS3 velgere over bibliotekets tilpassede metoder / velgere, når det er mulig. Det vil gjøre koden raskere, da velgermotoren kan bruke nettleserens innfødte parsing, i stedet for sin egen.

det er flott at du bruker tid på å lære grunnleggende webdesign, men hvis du trenger en rask løsning, kan en AV VÅRE KLARE CSS-maler være et godt alternativ. Vi har også noen premium CSS elementer for deg å vurdere.

• 
  CSS3
  15 Elegante CSS Pristabeller For Ditt Nyeste Webprosjekt
  Monty Shokeen
• 
  Bootstrap 4
  18 Beste Bootstrap 4 Plugins
  Monty Shokeen

Gratis Tilgang Til Envato-Elementer I 1 Måned

Endelig Er Det et veldig spesielt tilbud som hjelper deg med å bygge profesjonelle nettsteder og apper. I tillegg til Å bruke DISSE CSS velgere, hvorfor ikke dra nytte av høy kvalitet lager bilder, videoopptak, premium fonter, grafikk, illustrasjoner, og mer?

Normalt må du betale for ressurser som det. Men akkurat nå kan du få tilgang til millioner av kreative ressurser for kodingsprosjektene dine i en hel måned, helt gratis. Og i tillegg får du ubegrensede nedlastinger, slik at du kan hente så mye du vil i løpet av den måneden, og bare betale hvis du bestemmer deg for å fortsette!

for å dra nytte av dette tilbudet, klikk på denne spesielle registreringskoblingen eller skriv inn koden nedenfor på registreringssiden:

elements_cont_tuts-freemonth1-4bwkbp

Ikke vent for lenge-tilbudet er kun gyldig i en begrenset periode!