Što je odabir CSS Descendanta?

Struktura HTML dokumenta slična je obiteljskom stablu. U vašoj obitelji imate svoje roditelje i druge koji su došli prije vas. Ovo su tvoji preci. Djeca i oni koji dolaze nakon tebe na toj stablici su tvoji potomci. HTML radi na sličan način. Elementi koji su unutar drugih elemenata su njihovi potomci. Na primjer, budući da je gotovo svaki HTML element unutar oznaka, oni bi bili potomci tog elementa . Taj je odnos važno razumjeti kada počnete raditi s CSS-om i trebate ciljati određene elemente za primjenu vizualnih stilova.

CSS Descendant Selectori

Odabir CSS potomka odnosi se na elemente koji su unutar drugog elementa (ili točnije naveden, element koji je potomak drugog elementa). Na primjer, neuredan popis ima oznaku s oznakama kao potomci. Kao primjer koristimo sljedeći HTML:

• ovo je veza

  LI oznake su potomci UL oznake. A oznaka je potomak oba LI (dijete potomak) i UL (unuka proglašen) oznake. Ako razmišljate o tome pomoću primjera obiteljskog stabla,

  bi bio roditelj,
  • bi bio dijete tog elementa, a bi bio dijete
  • i unuka
    .

    Pa kako biste ciljali određene elemente na web stranici pomoću tih selektora potomaka? Prvo, morate odrediti selektore potomaka pomoću dva (ili više) tipa selektora odijeljenih razmakom.

    li a {text-decoration: none; }

    U tom se primjeru stilovi odnose samo na element veze () koji je potomak elementa stavke popisa (

    • ). Sve ostale veze na stranici koje nisu potomci stavke popisa neće dobiti taj stil.

      Jedna važna stvar koju trebate zapamtiti jest da ne smeta koliko oznaka postoje između oznaka koje možete koristiti u vašem selektoru potomka. Ako je drugi element zatvoren bilo gdje unutar prvog elementa, bit će odabran kao potomak.

      Ako želite odabrati sve sidra koji potječu od ul elemenata, napisali biste:

      ul a {text-decoration: none; }

      Sada se ti stilovi primjenjuju na bilo koju vezu koja je potomak stavke popisa. Također možete napisati ovaj izbornik

      ul li a {text-decoration: none; }

      Ovo je selektor selekcije koji koristi više od dva tipa odabira. U ovom slučaju, to bi se primjenjivalo na veze koje se nalaze unutar stavke popisa i također unutar neurednog popisa.

      Korištenje klasa izbora i ID selektora

      Odabiri s kojih silazite ne moraju uvijek biti tipovi potomci. Na primjer, zamislite da imate područje web-lokacije (poput podjele) s ID atributom "billboarda". Možete postaviti selektor selekcije s tog ID-a:

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

      To bi oblikovalo neuredan popis koji je potomak elementa s ID-om "billboarda". To možete učiniti isto za vrijednosti klase.

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

      To pretpostavlja da podjela ima vrijednost klase "plakata". Gornji CSS oblikovat će element

      unutar bilo koje podjele koja ima ovu vrijednost klase.

      Možete dobiti stvarno teške ruke i verbose s potomak selektori. Na primjer, ako koristite Dreamweaver za pisanje HTML koda , postoji postavka kada dodate nove CSS pravila koja će automatski izraditi selektor na temelju položaja pokazivača na tu stranicu. Ono što Dreamweaver u ovom slučaju stvara divlji suveren i dugotrajni selektor potomka. Toliko specifičnosti nije potrebno za vaš CSS za rad. Ono što želite učiniti je pronaći ravnotežu između selektora potomka koji je dovoljno specifičan da biste mogli izvući točne elemente koji su vam potrebni (bez oblikovanja onih koje ne želite utjecati) bez CSS pravila koja imaju pretjerano odabire velike.