CSS -> A szelektorok

Ez a lecke megpróbálja a CSS alkamazókat bevezetni egy magasabb szintű szelektálási módszer alapjaiba.
(Hogy a későbbiekben megértsük a kissé bonyolultabb szelektorokat, szükségünk lesz a dokumentum-fa, és néhány alapfogalom átismételésére ennek az anyagrésznek a megértéséhez. (HTML/XHTML -> A dokumentum-fa)

A szelektorok jól használható, és egyszerű eszközei annak, hogy CSS kódunk rövidebb, átláthatóbb és logikus legyen.
Segítségükkel a dokumentum-fa minden elemét kiválaszthatjuk, tulajdonságokat definiálhatunk.

Filozófiája

A magassab szintű szelektálás (kiválasztás) lényegek, hogy minél általánosabb CSS-t írhassunk oldalunkra.

Ez abban rejlik, hogy nem kell minden egyes elemre külön-külön megírni ugyanazon kódrészt, hanem elég egyszer megadni ezeket.
Így nem csak azt érhetjük el, hogy kódunk rövidebb lesz, tehát gyorsabban töltödik be, hanem azt is, hogy minden egyes, így definiált elem, bármely előfordulási helyén biztosan ugyanolyan tulajdonságokkal fog rendelkezni.
Nem kell a megegyező beállításokkal bíró elemeket egyenként átírnunk, hiszen, ha általánosan írjuk meg rájuk a CSS-t, akkor csak egy helyen kell ezt megtennünk.

A fentiekből egyenesen következik az egységes megjelenés, és a könnyen módosítható logikus felépítésű kód.

Először ismertetnék néhány szelektor típust, majd visszatérek a filozófiai részhez néhány példával.
Figyeljünk arra, hogy a szelektorok többségét nem minden böngésző támogatja (vonatkozik ez főleg az Internet Explorerre).
Ezek a "problémásak" a 4-ik, és az ennél alacsonyabb szintűekre vonatkoznak.


A szelektorok típusai

1. Típus szelektorok

A összes HTML elemet ki lehet választani szelektorokkal.
Ebben az esetben csak annyi a dolgunk, hogy a kiválasztani kívánt elem nevét használjuk szelektornak.

Láthajtuk, hogy tag-ek nevével megegyeznek szelektoraik nevei is. A H1 taget a H1 szelektorral választhatjuk ki, a B taget a B szelektorral.
És ugyanígy az összes többi HTML elemre érvényes ez, kezdve a TABLE-től a DIV-en át, mindent.

2. Az ID szelektor

Mint tudjuk, az elemeknek adhatunk egyedi azonosítót.
Ilyenkor egyedi, "személyreszabott" tulajdonságokkal láthatjuk el őket.
HTML attribútuma az ID, CSS szelektora pedig a # (kettőskereszt) jel.

A típus szelektor után adtam most meg az egyedi kiválasztást - H1#parancs.
Ez csak egyik módja az ilyen fajta szelektálásnak és ez a leglogikusabb.
Hiszen, ha hirtelen ránézünk kódunkra, akkor rögtön le tudjuk olvasni, hogy milyen azonosítóval ellátott HTML elemet formáztunk.

Figyeljünk arra, hogy nem minden esetben használható ez a szelektálási módszer.
Ha általánosan minden "valasz" azonosítójú elemet akarunk formázni, akkor el kell hagynunk a típus kiválasztását, így nem csak az adott tipusú elemre lesz érvényes kódunk.

3. Az osztály szelektor

Lehetőségünk van több elemnek egyszerre megadni tulajdonságokat ezzel a módszerrel.
Itt meg kell adni a HTML-ben minden egyes általunk egyformán formázni kívánt elemnek a CLASS attribútumot.

Láthatjuk, hogy a fenti kiválasztás első része csak a "parancs" osztályú H1 elemeket elemeket formázta.
A .valasz szelektor viszont minden, ilyen osztályú elemet formáz.

Miért? Az 1. pontban leírtak szerint itt típusos kiválasztás történt.
Tehát, csak minden H1 típusú, "valasz" osztályú elemet formáztunk.
Ez nem vonatkozik más eltérő tagokra, akkor sem, ha osztályuk megegyezik

A második rész már minden "valasz" osztályú elemet kiválaszotta, mert nem volt előtte típus megadva.
Ezekre a kis részletekre figyeljünk később is oda.

4. Univerzális szelektor

Az univerzális szelektorokkal minden elemet ki tudunk választani a dokumentum-fán.

Szintakszisa:

Ezzel a beállítással minden szöveg színe bordó lesz. Óvatossan bánjunk vele, én is csak az anyag teljességéért említem meg.

5. Gyerek szelektor

Ez a szelektor olyan elemeket választ ki, amik gyerek-szülő kapcsolataban állnak.
Szintakszisa:

A P blokkszintű elem ebben az esetben gyermeke a BODY-nak.
De lehetne UL > LI is, ekkor a rendezetlen lista listaelemére utalunk.
Persze, nem muszály a HTML tagokat kiválasztanunk.
Megtehetjükazt is, hogy az azonosítóra, vagy az osztályra hivatkozunk.
Egy példa a használhatóságára:

Próbáljuk meg úgy formázni a fenti HTML kódot, hogy az átalános legyen minden "doboz" osztályú DIV-re.

Minden "doboz" osztályú DIV-ben a bekezdések szövege szürke lesz független attól, hogy van-e azonosítója vagy nincs.
Viszont, mint látjuk, később beállítotam a "kerek" azonosítújó P elem szövegdekorációját, ezzel kiegészítve az előtte levő sorokat.
(Ha külön, másként állítod be a már megadott tulajdonságokat, akkor azok felülíródnak.)

6. A leszármazotak kiválasztása

Tegyük fel, hogy több HTML elemet ágyazol egymásba, s el szeretnéd érni a legbelső elemet.
Erre szolgál az említett szelektálási mód.
Szintakszisa:

Ezzel a módszerrel kiválaszottuk a H1 elem minden B elemű leszármazottját.

7. Közeli testvér kiválasztása

Szintakszisa: E + F
Kiválasztja azt az F elemet, mely közvetlenül az E után áll. Tehát a dokumentum-fában testvéri viszonyban vannak, és határosak egymással.
Alkamazása olyan esetekben hasznos, ha dokumentumaidban többször ismétlődik ilyen módon két tag.
Ekkor ugyanis független ezen "pár" elhelyezkedésétől (de mindig egymás alatt legyenek, testvéri viszonyban), ugyanazzal a CSS kóddal meg tudod formázni mindenhol.
Nem kell figyelni az ugyanolyan, de máshol, más sorrendben előforduló elemekre.
Továbbá nem kell külön osztállyal sem ellátnod a kiválasztani kívánt elemet, hisz dinamikusan a CSS szelektor kiválasztja e "testvér" második tagját.
Szabályt írsz az elemre. - ha H1 elem alatt van közvetlen H2 elem, akkor formázd H2 -őt.

A példa kimenete (böngészőtől függően) az első H1-et követő H2 elem pirosra színzése, aláhúzása, és a második "magyányos" H2 elem kékre színzése.
Ha nem használjuk e sorredben a két fenti elemet, akkor természetesen nem történik meg a formázás és minden H2 kék színű lesz,amíg a H1 elem nem helyezkedik egyik fölé sem.

8. Attribútum szelektor

Érdekes kiválaszátsi mód. Lényege, hogy a megfelelő attribútummal rendelkező elemet választja ki.

Szintakszisa: IMG
Azokat az IMG tag-okat formázza, melyek rendelkeznek alt attribútummal.

Másik fajtája azokat az elemeket válszatja ki, melyek attribútumának értéke a szelektorban meg van adva.

Szintakszisa: A[href="http://netoktato.hu"]
Minden olyan A elemet kiválaszt, melynek href értéke "http://netoktato.hu".
Ezek a kiválasztások vonatkozhatnak az INPUT tag-okra is. Nézzük meg a következő példát.

A fenti kóddal minden button típusú INPUT gombnak adtunk egy háttérszínt.
Ám nemcsak a button tipusra alkalmazhatjuk ezt, hanem minden "type" értékre is.

Az általános CSS alapjai

1. A csoportosítás - külsőségek

Sokszor előfordul, hogy ugyanolyan, vagy sok egyforma tulajdonságot adunk több elemnek.
Ekkor erre a problámára az szokott lenni a válasz, hogy ezeket külön-külön leírjuk, megadva mindig ugyanazt a formázást.
Ez nem helyes. Ezzel növejlük a kódot, és átláthatatlanná, nehezen módosíthatóvá tesszük CSS fájlunkat.
A probléma megoldása első lépésben a csoportosítás.

Ha jól megnézzük a kódot, ahhoz képest, hogy 4 elemet formáztunk meg, nem hosszú.
Első részben megadtuk azokat a tulajdonságokat, melyek az összes elemnél megegyeznek.
(Ha ezeket külön adtuk volna meg, sokkal hosszab kódot kaptunk volna. Ráadásul később mindegyiket egyesével írhattuk volna át, ha valamilyen vátoztatást akartunk volna.
Képzeljük el ezt egy 500 soros kódban...
A második és harmadik részben csak azokat a tulajdonságokat állítottuk be, melyeket az első részben a többi elemre nem akartunk alkamazni.
A harmadik részhez hozzáfűzném, hogy ott a kiválasztás a teljes elérési úttal történk meg. (#content -> .datebox -> .date)

2. Az általánosítás

A csoportosítás melett, talán ez a legfontosabb dolog, amit meg kell értenünk.
Dokumetumainkban sokszor használunk ugyanolyan elemeket, részint azonos beállításokkal.
(Ezt feljebb is leírtam, de úgy gondolom fontos belátni.)

Tegyük fel, hogy van 40 ugyanolyan DIV, de más osztályúak és azonosítójúak; azonos margin, padding, font, height, width beállításokkal de eltérő szövegszínnel.
Ha mind a 40-nek külön-külön adnánk meg a formázási tulajdonságokat, akkor igen hosszú listánk lenne.
Itt már a csoportosítás sem segítene rajtunk, tehát nézzünk mit tehetünk.


Segítségül vettem a típus szelektort, kiválaszottam az összes DIV-et és megadtam nekik az azonos tulajdonságokat.
Ezzel csökkentve a sorok számát, mivel nem adtam meg mindegyiknek külön a tulajdonságot.
Majd az eltérő, tulajdonságokat - amikből persze kevebb is van - állítottam be külön.
Később, ha módosítani szeretném a dobozok szélességét, magasságát, stb., akkor elég csak az általánosított formához nyúlnom, megtakarítva rengeteg időt.

Beláthatjuk, hogy általános CSS formázással sok időt takarítunk meg, kódunk rövidebb, logikusabb és nem utolsó sorban könyebben módosíthatóbb lesz.