A weboldal szövegének és tartalmának HTML-kóddal történő elrendezése csak az épület „darabja” egy weboldal elülső része. Ennek a folyamatnak egy másik nagy része a vizuális stílus létrehozása, amelyet az irányít a CSS szabályai.
Amikor új weboldalt építünk, vagy jelentősen megváltoztatunk egy meglévő elrendezést, óhatatlanul azt akarjuk, hogy weboldalunk bizonyos részei bizonyos módon nézzenek ki. Ehhez fontos megérteni a különféle módszerek használatát CSS kombinátorok, például a CSS leszármazott-választó. Ez a CSS-kombinátor lehetővé teszi, hogy a webhely nagy részei egyszerre kapják meg ugyanazokat a stílusváltozásokat.
Mi az a CSS leszármazott-választó?
A CSS leszármazott-választó a négy különböző CSS-kombinátor egyike. Ha két szelektor között egyetlen szóközt () adunk hozzá, ugyanazok a stíluselemek a második választóra is vonatkoznak, tekintettel arra, hogy az utódok ugyanazon az első szelektoron osztoznak.
A CSS leszármazott-választó megértéséhez először is meg kell megérteni a CSS-választókat
. A választó leírásának legjobb módja az, hogy CSS-operátor azonosítja azt a HTML-darabot, amelyet megpróbál stilizálni. Szelektornak hívják, mert „kiválasztja” azt a HTML bitet, amely ugyanazzal az operátorral rendelkezik, mint a CSS szülő.Az ilyen operátorok gyakori példái:
div
Ez egy címke, amely meghatározza a HTML egy szakaszát, amely tartalmazhat például bekezdéseket és tartalmat, vagy:
li
amely egy rendezett lista. Egy másik hasonló címke:
ul
Ez rendezetlen listát hoz létre. A bonyolultabb mintákat szelektoroknak is nevezik. Leegyszerűsítve: a CSS leszármazott-választó megmondja egy weboldalnak, hogyan kell kinézni, amikor az egyik választó „beágyazódik” egy közös ős alá.
Az első választó lesz a CSS szülő vagy az „ős” választó, a második választó lesz az utód. Gondoljon a fájlkönyvtár működésére: a CSS szülő olyan, mint egy mappa, amely más mappákat tartalmaz, amelyek saját mappákat is tartalmazhatnak.
A négy kombinátor közül az egyetlen, amely mindent kiválaszt, ami be van ágyazva egy adott CSS szülő alá, az a CSS leszármazott választó. Három másik kombinátor létezik.
- A gyermekválasztó (‘>’ egyetlen szóköz helyett) csak azokat az elemeket választja ki, amelyekre az első választó hivatkozik a kombinátorban. Ha az első választó (div), a második pedig (p), akkor csak a (p) van kiválasztva, amíg ő (div) van őse. Ha egy bekezdés új (szakasz) alatt jön létre, akkor is, ha ugyanabban (div) van, a stílusszabályokat nem tartják be.
- A szomszédos testvérválasztó (egyetlen szó helyett ‘+’) csak azt az elemet választja ki, amely a kombinátor második választójához áll legközelebb. Ha az első választó (div) és a második választó (p), akkor az első elemet választjuk, amely (p) -t használja, de nem (div).
- Az általános testvérválasztó (egyetlen szó helyett ‘~’) minden elemet kiválaszt, kivéve azokat, amelyekre a második választó hivatkozik. Ha az első választó (div) és a második választó (p), akkor minden olyan elem ki lesz jelölve, amelyik nem (p).
Hogyan néz ki egy CSS leszármazott-választó?
Az egymás mellett működő két különböző CSS leszármazott szelektor következő példájában a (div) az az első választó az első kombinátorban, míg (ul) az első választó a másodikban kombinátor. Mindkét CSS leszármazott szelektorban (p) második választóként használjuk.
A stíluselemek különböznek a (div) és (ul) között, de a (p) mindkét esetben egyértelműen hordozza CSS-szülőjének vonásait.
Miért érdemes CSS leszármazott-választót használni?
A CSS leszármazott szelektor fontosságának megértéséhez érdemes először megérteni a CSS beágyazott szelektorait.
Általában azt szeretnénk, ha bizonyos stílusszabályok az összes webhelyre vonatkoznának, például az a konkrét méret és betűtípus, amelyet az összes (p) bekezdés szöveg alapértelmezés szerint használ. Hasonlóképpen, a HTML akkor kezd rendetlennek tűnni, ha ezeket a stílusszabályokat az egyes bekezdésekre alkalmazzák, nem pedig az egész weboldalra.
A beágyazott CSS CSS-kombinátorok, például a CSS leszármazott-választó használatával lehetséges. Ha a CSS-t „beágyazza” a szülőválasztó alá, akkor gyorsan és hatékonyan meg tudja mondani a webhelyet hogyan kell kinéznie egy adott választónak minden olyan forgatókönyvben, amelyre a CSS szülő hivatkozik.
A beágyazott CSS választó lehetővé teszi számunkra, hogy ugyanazokat a szabályokat alkalmazzuk a webhely több szakaszának stílusához egyszerre, lehetővé téve számunkra, hogy kevesebb munkával boldoguljunk, miközben a HTML-t is tisztán és tisztán tartjuk.