The 30 CSS Selectors You Must Memorize

Learn CSS: The Complete Guide

we ’ve built a complete guide to help you learn CSS, whether you’ re just starting with the basics or you want to explore more advanced CSS.

CSS-valitsimet

joten opitte pohjan id, class ja descendant valitsimet-ja sitten kutsuitte sitä päiväksi? Jos näin on, menetät valtavan joustavuuden tason. Olet sen velkaa itsellesi sitouttaa nämä kehittyneet CSS ja CSS3 valitsimet muistiin.

Perusvalitsijat

1. *

* { margin: 0; padding: 0;}

tyrmätään ilmiselvät aloittelijat, ennen kuin siirrymme kehittyneempiin valintoihin.

tähtisymboli kohdistuu jokaiseen sivun alkuaineeseen. Monet kehittäjät käyttävät tätä temppua nollatakseen margins ja padding. Vaikka tämä on varmasti hieno pikatesteissä, neuvoisin, ettet koskaan käytä tätä tuotantokoodissa. Se lisää liikaa painoa selaimella, ja on tarpeetonta.

* voidaan käyttää myös lapsivalitsimia.

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

tämä kohdistuu jokaiseen alkuaineeseen, joka on #container divlapsi. Yritä jälleen olla käyttämättä tätä tekniikkaa kovin paljon, jos koskaan.

2. #X

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

hash-symbolin Prefixing a selector allows us to target by id. Tämä on helposti yleisin käyttö; ole kuitenkin varovainen käytettäessä id valitsimia.

kysy itseltäsi: pitääkö minun ehdottomasti soveltaa id tätä elementtiä kohdentaakseni sitä?

id valitsimet ovat jäykkiä eivätkä salli uudelleenkäyttöä. Jos mahdollista, yritä ensin käyttää tagin nimeä, jotain uutta HTML5-elementtiä tai jopa pseudoluokkaa.

3. .X

.error { color: red;}

tämä on class valitsin. Ero idS: n ja classes: n välillä on se, että jälkimmäisellä voidaan kohdistaa useita alkuaineita. Käytä class es, kun haluat tyylisi soveltuvan elementtiryhmään. Vaihtoehtoisesti, käytä ids neulan etsimiseen heinäsuovasta ja muotoile vain se tietty elementti.

4. X

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

mitä jos haluaa kohdentaa kaikki elementit jollekin sivulle niiden type mukaan eikä id tai classnimeen? Pidä se yksinkertaisena ja käytä tyyppivalitsinta. Jos haluat kohdentaa kaikki järjestämättömät luettelot, käytä ul {}.

Perusvalitsijoiden Live demot

Combinator-valitsijoiden

5. X Y

li a { text-decoration: none;}

seuraavaksi yleisin valitsin on descendant valitsin. Kun valitsijoiden kanssa pitää olla tarkempi, käytetään näitä. Entä jos kaikkien ankkurilappujen kohdentamisen sijaan sinun tarvitsee esimerkiksi kohdistaa vain ne ankkurit, jotka ovat järjestämättömässä luettelossa? Tämä on nimenomaan silloin, kun käyttäisit jälkeläisvalitsinta.

Pro-Vihje: Jos valitsija näyttää X Y Z A B.error, teet sen väärin. Kysy aina itseltäsi, onko aivan välttämätöntä käyttää kaikki se paino.

6. X + Y

ul + p { color: red;}

tätä kutsutaan viereiseksi valitsijaksi. Se valitsee vain elementin, jota edeltää välittömästi entinen Elementti. Tällöin vain ensimmäisessä kappaleessa jokaisen ul jälkeen on punaista tekstiä.

7. X > Y

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

ero standardin X Y ja X > Y välillä on se, että jälkimmäinen valitsee vain suoria lapsia. Harkitse esimerkiksi seuraavaa merkintää.

 <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>

#container > ul: n valitsin kohdistuu vain ulS: ään, jotka ovat div: n suoria lapsia, joiden id on container. Se ei kohdistu esimerkiksi ul, joka on ensimmäisen lilapsi.

tästä syystä child Combinatorin käytöstä on suorituskykyetuja. Itse asiassa, se on suositeltavaa erityisesti työskenneltäessä JavaScript-pohjainen CSS valintamoottorit.

8. X ~ y

ul ~ p { color: red;}

tämä sisaruskombinaattori on samanlainen kuin X + Y, mutta se on vähemmän tiukka. Vaikka viereinen valitsin (ul + p) valitsee vain ensimmäisen elementin, jota edeltää välittömästi entinen valitsin, tämä on yleisempi. Se valitsee edellä olevaan esimerkkiimme viitaten kaikki p alkuaineet, kunhan ne seuraavat ul.

Combinator-valitsijoiden Live-demot

attribuuttien valitsijat

9. X

a { color: green;}

, jota kutsutaan attribuuttivalitsimeksi, yllä olevassa esimerkissämme tämä valitsee vain ankkuritagit, joilla on title attribuutti. Ankkuri tunnisteet, jotka eivät saa tätä erityistä muotoilua. Mutta entä jos pitää olla tarkempi? Katso seuraava esimerkki!

10. X

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

yllä oleva pätkä tyylittelee kaikki ankkuritagit, jotka linkittävät https://code.tutsplus.com; he saavat vihreän värimme. Kaikki muut ankkurilaput pysyvät ennallaan.

huomaa, että käärimme arvon lainausmerkkeihin. Muista myös tehdä tämä, Kun käytät JavaScript CSS selector engine. Jos mahdollista, käytä aina CSS3-valitsimia epävirallisten menetelmien yli.

tämä toimii hyvin, vaikka on vähän jäykkä. Mitä jos linkki todellakin suoraan Envato Tuts+, mutta ehkä polku on code.tutsplus.com koko URL: n sijaan? Näissä tapauksissa, voimme käyttää hieman säännöllisiä lausekkeita syntaksi.

11. X

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

There we go; that ’ s what we need. Tähti tarkoittaa, että etenevän arvon täytyy näkyä jossakin attribuutin arvossa. Näin tämä kattaa tutsplus.com, code.tutsplus.com, ja jopa webdesign.tutsplus.com.

muista, että tämä on laaja toteamus. Mitä jos ankkuri tag liittyy johonkin ei-Envato sivuston merkkijono tutsplus URL? Kun haluat olla tarkempi, käytä ^: ää ja $: ää viitataksesi Merkkijonon alkuun ja loppuun.

12. X

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

Oletko koskaan miettinyt, miten jotkut verkkosivustot pystyvät näyttämään pienen ikonin ulkoisten linkkien vieressä? Olen varma, että olet nähnyt nämä ennen; ne ovat mukavia muistutuksia siitä, että linkki ohjaa sinut täysin eri verkkosivuilla.

tämä on sakara, jossa on karaatin tunnus. Sitä käytetään tavallisimmin säännöllisissä lausekkeissa merkkijonon alun osoittamiseen. Jos haluamme kohdistaa kaikki ankkuri-tunnisteet, joilla on href, joka alkaa http, voisimme käyttää valitsinta samanlainen pätkä yllä.

huomaa, että emme etsi https://; se on tarpeetonta, eikä selitä URL-osoitteita, jotka alkavat https://.

nyt, mitä jos haluaisimme sen sijaan stailata kaikki ankkurit, jotka linkittävät vaikkapa valokuvaan? Noissa tapauksissa etsitään narun päätä.

13. X

a { color: red;}

taas käytetään säännöllisen lausekkeen symbolia $, jolla viitataan merkkijonon loppuun. Tässä tapauksessa etsimme kaikkia ankkureita, jotka linkittävät kuvan-tai ainakin URL-osoitteen, joka päättyy .jpg. Muista, että tämä ei Tallenna GIF-ja PNG-kuvia.

14. X

a { color: red;}

miten kompensoimme kaikki eri kuvatyypit? Voisimme luoda useita valitsimia.:

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

mutta se on tuskaa ja tehotonta. Toinen mahdollinen ratkaisu on käyttää mukautettuja attribuutteja. Mitä jos lisäämme Oman data-filetype – attribuuttimme jokaiseen kuvaan linkittävään uutisankkuriin?

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

sitten, kun koukku on paikallaan, Voimme käyttää vakiomäärevalitsinta kohdistamaan vain nuo ankkurit.

a { color: red;}

15. X

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

tässä erikoinen, joka tekee vaikutuksen ystäviisi. Harva tietää tästä tempusta. Tilde (~)-symbolin avulla voidaan kohdistaa attribuutti, jolla on avaruudesta erotettu arvoluettelo.

kun edessämme on mukautettu attribuuttimme numerosta 15, voisimme luoda data-info attribuutin, joka voi vastaanottaa välilyönnillisen listan kaikesta, mitä meidän tarvitsee huomioida. Tässä tapauksessa otamme huomioon Ulkoiset linkit ja linkit kuviin-vain esimerkkinä.

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

kun tämä merkintä on käytössä, voimme nyt kohdentaa kaikki tunnisteet, joilla on jompikumpi näistä arvoista, käyttämällä ~ attribuuttien valintatemppua.

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

aika näppärä, vai mitä?

Attribuuttivalitsijoiden Live demot

Valevalitsijoiden

16. X: vieraili ja X:linkki

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

käytämme :link pseudoluokkaa kohdentaaksemme kaikki ankkuri-tunnisteet, joita ei ole vielä klikattu.

vaihtoehtoisesti käytössä on myös :visited pseudo-luokka, joka, kuten arvata saattaa, mahdollistaa tietyn tyylittelyn vain klikatun sivun ankkurilappuihin eli ”vierailtuihin”.

17. X: rastittu

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

tämä pseudoluokka kohdistuu vain valittuun käyttöliittymäelementtiin—kuten radionappiin tai valintaruutuun. Niin yksinkertaista se on.

18. X:

jälkeen before ja after pseudoluokat ovat suuria. Joka päivä ihmiset näyttävät löytävän uusia ja luovia tapoja käyttää niitä tehokkaasti. Ne yksinkertaisesti luovat sisältöä valitun elementin ympärille.

monet tutustuivat näihin luokkiin kohdatessaan clear-fix-hakkeroinnin.

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

tämä hakkerointi käyttää :after pseudoluokkaa liittääkseen tilan elementin perään ja tyhjentääkseen sen. Se on oiva kikka pitää työkalupussissa varsinkin silloin, kun overflow: hidden; – menetelmä ei ole mahdollinen.

toista luovaa käyttöä varten, katso pikavinkkini varjojen luomiseen.

CSS3-valitsimien määrittelyn mukaan tulisi teknisesti käyttää kahden Colonin pseudoelementtisyntaksia ::. Kuitenkin, pysyä yhteensopiva, käyttäjä-agentti hyväksyy yhden kaksoispisteen käyttö samoin.

19. X: hover

div:hover { background: #e3e3e3;}

Oh come on. Tiedät tämän. Virallinen termi tälle on ”user action pseudo class”. Se kuulostaa hämmentävältä, mutta se ei todellakaan ole. haluatko soveltaa tiettyä muotoilua, kun käyttäjä leijuu elementin päällä? Tämä hoitaa homman!

muista, että Internet Explorerin vanhemmat versiot eivät vastaa, kun :hover pseudoluokkaa sovelletaan muuhun kuin ankkurilappuun.

käytät tätä valitsinta useimmiten, kun kiinnität esimerkiksi border-bottom ankkurilappuihin, kun ne leijuvat yli.

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

Pro-Vihje: border-bottom: 1px solid black; näyttää paremmalta kuin text-decoration: underline;.

20. X:not(valitsin)

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

negaation pseudo-luokka on erityisen hyödyllinen. Sanotaan, että haluan valita kaikki divs, paitsi sen, jonka id on container. Pätkä yllä hoitaa tehtävän täydellisesti.

tai jos halusin valita jokaisen elementin (ei suositella) lukuun ottamatta kappaletunnisteita, voisimme tehdä:

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

21. X:: pseudoelementti

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

voidaan käyttää pseudoelementtejä (nimimerkki ::) jonkin alkuaineen fragmenttien, kuten ensimmäisen rivin tai ensimmäisen kirjaimen, tyylittelyyn. Muista, että näitä on sovellettava lohkotason elementtejä, jotta ne tulevat voimaan.

pseudoelementti koostuu kahdesta paksusuolesta: ::

Kohdentakaa kappaleen

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

ensimmäinen kirjain tämä pätkä on abstraktio, joka löytää kaikki kappaleet sivulta, ja sitten alikooste vain kyseisen elementin ensimmäisen kirjaimen.

Tätä käytetään useimmiten lehtimäisen tyylittelyn luomiseen artikkelin ensimmäiseen kirjaimeen.

kohdistaa kappaleen

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

ensimmäisen rivin vastaavasti ::first-line pseudoelementti tyylittelee odotetusti vain alkuaineen ensimmäisen rivin.

” yhteensopivuudesta olemassa olevien tyylisivujen kanssa käyttäjäagenttien on myös hyväksyttävä aiempi yhden kaksoispisteen merkintä pseudoelementeille, jotka on otettu käyttöön CSS-tasoilla 1 ja 2 (eli, :first-line, :first-letter, :before ja :after). Tätä yhteensopivuutta ei sallita tässä eritelmässä esitettyjen uusien pseudoelementtien osalta.”—W3C Selectors Specs

live Demo of Pseudo Selectors

Nth Child and Type Selectors

22. X: nth-lapsi (n)

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

Muistatko ajat, jolloin emme voineet kohdistaa tiettyjä elementtejä pinoon? nth-child pseudoluokka ratkaisee sen!

huomaa, että nth-child hyväksyy parametriksi kokonaisluvun, mutta tämä ei ole nollapohjainen. Jos haluat kohdistaa kohteen toiseen kohtaan, Käytä li:nth-child(2).

tämän avulla voidaan jopa valita muuttuva joukko lapsia. Esimerkiksi li:nth-child(4n) voisimme valita joka neljännen listan kohteen.

23. X:Nth-last-child(n)

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

mitä jos ul: n kappalelista olisi valtava, eikä tarvitsisi kuin päästä käsiksi vaikkapa kolmanneksi viimeiseen kappaleeseen? li:nth-child(397): n sijaan voisi käyttää nth-last-child pseudoluokkaa.

tämä tekniikka toimii lähes samalla tavalla kuin numero 16 edellä. Erona on, että se alkaa kokoelman lopusta ja toimii takaisin.

24. X: tyypin nth(n)

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

tulee aikoja, jolloin child: n valitsemisen sijaan on valittava elementin type mukaan.

Imagine markup, joka sisältää viisi järjestämätöntä listaa. Jos halusi tyylitellä vain kolmannen ul, eikä ollut ainutkertaista id koukkua, saattoi käyttää nth-of-type(n) pseudoluokkaa. Yllä olevassa katkelmassa vain kolmannella ul on raja sen ympärillä.

25. X:tyypin n: nneksi viimeinen(n)

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

ja kyllä, pysyäksemme johdonmukaisina voimme myös käyttää nth-last-of-type: ää aloittaaksemme valintaluettelon lopusta ja palataksemme kohti haluttua elementtiä.

26. X: ensimmäisen lapsen

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

tämän rakenteellisen pseudoluokan avulla voidaan kohdistaa vain alkuaineen vanhemman ensimmäiseen lapseen. Voit usein käyttää tätä poistaa rajoja ensimmäisen ja viimeisen luettelon kohteita.

esimerkiksi sanotaan, että sinulla on rivilista, ja jokaisella on border-top ja border-bottom. No, tuolla järjestelyllä, ensimmäinen ja viimeinen esine siinä sarjassa näyttää hieman oudolta.

monet suunnittelijat soveltavat tämän kompensoimiseksi luokkia first ja last. Sen sijaan, voit käyttää näitä pseudo luokkia.

27. X: viimeinen lapsi

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

first-child vastakohta, last-child kohdistuu elementin vanhemman viimeiseen kohteeseen.

last-child Valintaesimerkki

rakennetaan yksinkertainen esimerkki, jolla osoitetaan yksi mahdollinen näiden luokkien käyttö. Luomme tyylitellyn listan kohteen.

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

Markkasen kohdalla ei ole mitään erikoista: vain yksinkertainen lista.

tässä on 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;}

tämä muotoilu asettaa taustan, poistaa selaimen oletustäytteen ul ja soveltaa rajoja jokaiseen li antamaan hieman syvyyttä.

lisätäksesi syvyyttä luetteloihisi, käytä border-bottom jokaiselle li: lle, joka on sävy tai kaksi tummempi kuin li: n taustaväri. Levitä seuraavaksi border-top, joka on pari sävyä vaaleampi.

ainoa ongelma, kuten yllä olevasta kuvasta näkyy, on se, että järjestämättömän listan ylä—ja alaosaan laitetaan raja-joka näyttää oudolta. Käytetään :first-child ja :last-child pseudoluokkia tämän korjaamiseen.

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

There we go; that fixes it!

28. X: ainoa lapsi

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

totuudenmukaisesti et todennäköisesti huomaa käyttäväsi only-child pseudoluokkaa liian usein. Kuitenkin, se on saatavilla, jos tarvitset sitä.

sen avulla voidaan kohdistaa elementtejä, jotka ovat vanhemman ainoa lapsi. Esimerkiksi yllä olevaan pätkään viitaten vain kappale, joka on div: n ainoa lapsi, väritetään punaiseksi.

oletetaan seuraava merkintä.

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

tässä tapauksessa toista divkappaletta ei kohdisteta, ainoastaan ensimmäistä div. only-child pseudoluokka lakkaa olemasta voimassa heti, kun elementtiin liitetään useampi kuin yksi lapsi.

29. X: only-of-type

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

tätä rakenteellista pseudoluokkaa voidaan käyttää joillakin näppärillä tavoilla. Se kohdistuu elementteihin, joilla ei ole sisaruksia emokonttissaan. Esimerkkinä voidaan mainita kaikki uls, joilla on vain yksi listakohde.

kysy ensin itseltäsi, miten hoitaisit tämän tehtävän. ul li voisi tehdä, mutta tämä kohdistuisi kaikkiin listan kohteisiin. Ainoa ratkaisu on käyttää only-of-type.

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

30. X: ykköstyypin

first-of-type pseudoluokasta voi valita tyyppinsä ensimmäiset sisarukset.

testi

tämän ymmärtämiseksi tehdään testi. Kopioi seuraava merkintä koodieditoriin:

<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>

nyt, lukematta enempää, yritä selvittää, miten kohdistaa vain ”List Item 2”. Kun olet tajunnut sen (tai luovuttanut), lue eteenpäin.

ratkaisu 1

on olemassa useita tapoja ratkaista tämä testi. Käymme läpi kourallisen niistä. Aloitetaan käyttämällä first-of-type.

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

tässä pätkässä sanotaan lähinnä, että etsitään ensimmäinen Järjestämätön luettelo sivulta, sitten löydetään vain välittömät lapset, jotka ovat luettelon kohteita. Seuraava, suodata että alas vain toisen luettelon kohtaan, että joukko.

Ratkaisu 2

toinen vaihtoehto on käyttää viereistä valitsinta.

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

tässä skenaariossa löydämme ul, joka etenee välittömästi p – merkillä, ja sitten löydämme alkuaineen aivan viimeisen lapsen.

Ratkaisu 3

voimme olla näillä valitsijoilla niin vastenmielisiä tai leikkisiä kuin haluamme.

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

tällä kertaa nappaamme sivulta ensimmäisen ul ja sitten löydämme aivan ensimmäisen listan kohteen, mutta aloittaen alhaalta!

Live Demo Nth Child and Type Selectors

Conclusion

jos kompensoit vanhempia selaimia, kuten Internet Explorer 6, Sinun on silti oltava varovainen käyttäessäsi näitä uudempia valitsimia. Mutta älä anna sen estää sinua oppimasta näitä. Tekisit karhunpalveluksen itsellesi. Muista viitata tässä selaimen yhteensopivuusluetteloon. Vaihtoehtoisesti voit käyttää Dean Edwardin erinomaista IE9: ää.js script tuo tuen näille valitsimille vanhempiin selaimiin.

toiseksi, kun työskentelet JavaScript-kirjastojen kanssa, kuten suositussa jqueryssä, yritä aina käyttää näitä natiiveja CSS3-valitsimia kirjaston omien menetelmien/valitsimien päälle, mikäli mahdollista. Se tekee koodin nopeammin, koska valintamoottori voi käyttää selaimen natiivi jäsennys, eikä Oman.

on hienoa, että vietät aikaa oppimalla web design fundamentals, mutta jos tarvitset nopean ratkaisun, yksi valmis-to-use CSS-malleistamme saattaa olla hyvä vaihtoehto. Meillä on myös muutamia premium CSS kohteita voit harkita.

• 
  CSS3
  15 Elegant CSS Pricing Tables for your Latest Web Project
  Monty Shokeen
• 
  Bootstrap 4
  18 parasta Bootstrap 4-liitännäistä
  Monty Shokeen

vapaa pääsy Envato Elements 1 kuukausi

lopuksi, tässä on hyvin erikoistarjous auttaa rakentamaan ammattimaisen näköisiä sivustoja ja sovelluksia. Näiden CSS-valitsimien käytön lisäksi mikset hyödynnä korkealaatuisia varastokuvia, videomateriaalia, premium-fontteja, grafiikkaa, kuvituksia ja paljon muuta?

normaalisti tuollaisista resursseista pitäisi maksaa. Mutta juuri nyt, voit käyttää miljoonia luovia voimavaroja koodausprojekteihisi kokonaisen kuukauden ajan, täysin ilmaiseksi. Lisäksi saat rajoittamattoman määrän latauksia, joten voit napata kuukauden aikana niin paljon kuin haluat, ja maksaa vain, jos päätät jatkaa!

to take use of this offer, click this special signup link or enter the code on the registration page:

elements_cont_tuts-freemonth1-4bwkbp

älä odota liian kauan—tarjous on voimassa vain rajoitetun ajan!