Zein da CSS agerraldi hautatzailea?

HTML dokumentuaren egitura familiako zuhaitz baten antzekoa da. Zure familian, zure gurasoak eta zure aurretik zeuden beste batzuk dituzu. Hauek dira zure arbasoek. Haurrak eta zure zuhaitzaren ondoren etorriko direnak zure ondorengoak dira. HTML antzeko moduan funtzionatzen du. Beste elementuen barruan dauden elementuak ondorengoak dira. Adibidez, HTML elementu ia guztietan etiketen barruan dagoenez gero, elementuen ondorengo bat izango litzateke. Erlazio hau garrantzitsua da CSS-rekin lanean hasten zarenean ulertzea eta bisualen estiloak aplikatzeko elementu espezifikoak jartzea.

CSS beheranzko hautagailuak

CSS beheranzko hautatzailea beste elementu baten barruan dauden elementuei aplikatzen zaie (edo zehatzago esanda, beste elementu baten ondorengo elementu bat). Esate baterako, etendako zerrendak etiketa batekin etiketa bat du etiketa gisa. Erabili honako HTML adibide gisa:

• hau da esteka

  LI etiketak UL etiketa baten ondorengoak dira. Etiketa A LI (haurraren ondorengoak) eta UL (bikotearen ondorengoak) etiketa duten ondorengoa da. Familiako zuhaitzaren adibidea erabiliz pentsatzen baduzu,

  guraso izango litzateke,
  • elementu horren ume izan liteke, eta izango litzateke
  • haurra izango litzateke eta bilobaren
    .

    Beraz, nola web orriko elementu espezifikoak helburu horiek beheranzko hautagailuen bidez bideratuko lituzkete? Lehenik eta behin, ondorengo hautagailuak zehaztu behar dituzu bi (edo gehiago) motako hautagailuak espazioen arabera bereizita.

    li a {text-decoration: none; }

    Adibide horretan, estiloek elementu bateko elementuen (

    • ) ondoko elementu baten () elementua bakarrik aplikatuko lukete. Zerrenda elementuaren ondorengoak ez diren orrialde guztietako estekek ez lukete estilo hau lortuko.

      Gogoan izan beharreko gauza garrantzitsua da ez duela axola zenbat etiketa dauden zure ondorengo hautatzailean erabil ditzakezun etiketen artean. Bigarren elementua lehenengo elementuan dagoen edozein lekutan ageri bada, ondorengoa hautatuko da.

      Ul elementuetatik datozen ainguratze guztiak hautatu nahi badituzu, idazten zenuke:

      ul a {text-decoration: none; }

      Orain, estilo horiek zerrendako elementu baten ondorengo edozein esteka aplikatuko zaie. Hautatu hau ere hauta dezakezu

      ul li a {text-decoration: none; }

      Bi motako hautagailu baino gehiago erabiltzen dituzten ondorengo hautatzailea da. Kasu honetan, hau zerrenda-elementu barruan dauden loturak eta zerrenda nahasiko baten barruan ere aplikatuko lirateke.

      Klasearen hautagailuak eta hautespen-hautatuak erabiltzea

      Hausten ari zaren hautagailuak ez dira beti ondorengoak izan behar. Esate baterako, imajinatu gunearen azalera (zatiketa bat bezala) "kartel" baten IDaren atributua. ID horren ondorengo hautazkoa konfiguratu dezakezu:

      #billboard ul {background-color: #ccc; }

      Honek "billboard" IDaren elementu baten ondorengoa izango duen zerrenda desegokiak estilatuko lirateke. Klase-balioak egiteko gauza bera egin dezakezu.

      div.billboard ul {background-color: #ccc; }

      Hori dela eta, zatiketa "billboard" klase-balioa da. Goiko CSS estiloa

      elementu hau klasearen balioa duen zatiketa baten barruan egongo litzateke.

      Oso astunak eta zehatzak dituzu hautagailuen ondorengoekin. Adibidez, Dreamweaver-ek HTML kodea idazteko erabiltzen baduzu, ezarpen bat dago CSS arau berriak gehitzen badituzu orrialde horretan kurtsorearen kokapenean oinarritutako hautatzailea automatikoki sortzea. Dreamweaver- ek kasu hauetan sortzen duen hautapen selektiboa eta luzea sortzen du. Zehaztasun handia ez da beharrezkoa zure CSS lan egiteko. Zer egin nahi duzun zehaztu behar da ondorengo hautagaien artean dagoen oreka bat aurkitzea, behar bezalako elementu zehatzak zulatzeko (desegokiak izan ez dituztenak), CSS arauek oso ondo aukeratutako hautagaiek izan ez dezaten handiak.