Úvod do typov selektorov CSS
Typy selektorov CSS sa používajú na výber obsahu, ktorý chceme upraviť. Pomáha pri výbere prvkov na základe ich triedy, id, typu atď. Selektor CSS je súčasťou súboru pravidiel CSS.
Typy selektorov CSS
K dispozícii je 5 druhov CSS Selectors. Budeme sa zaoberať nasledujúcimi dôležitými selektormi CSS:
- Univerzálny selektor CSS.
- Selektor prvkov CSS.
- Selektor Id CSS.
- Výber triedy CSS.
- Selektor atribútov CSS.
1. Univerzálny selektor CSS
Na stránke HTML závisí obsah od značiek HTML. Pár značiek definuje konkrétny prvok webovej stránky. Univerzálny selektor CSS vyberie všetky prvky na webovej stránke.
Príklad:
* (
color: blue;
font-size: 21px;
)
Tieto dva riadky kódu obklopené zloženými zátvorkami ovplyvnia všetky prvky prítomné na stránke HTML. Vyhlásime univerzálny selektor pomocou hviezdičky na začiatku zloženej ortézy. Univerzálny selektor je možné použiť spolu s ostatnými selektormi v kombinácii.
2. Selektor prvkov CSS
Selektor prvkov CSS je známy aj ako selektor typu. Selektor prvkov v CSS sa snaží zhodovať prvky HTML s rovnakým názvom. Preto je výber selektora
- zodpovedá všetkým
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Cheatheet CSS3
- Rozhovory s CSS
- SASS vs SCSS
- Rozhovor SASS
- Príklady usporiadaného zoznamu HTML
- prvky, tj všetky neusporiadané zoznamy na tejto stránke HTML.
Pozrime sa na príklad selektora prvkov.
ul (
border: solid 1px #ccc;
)
Aby sme to lepšie pochopili, poďme sa pozrieť na ukážkový kód HTML a použiť kód CSS, ktorý sme napísali vyššie.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Ukážkový text
V tomto príklade nájdeme hlavne tri prvky, a to
- prvok, značku a ďalší
- prvok. Keďže sa náš kód CSS vzťahuje na
- konkrétne, zmeny na hranici sa vykonajú iba pre našu
- a nie pre značky. Tieto zmeny sa zvyčajne nevzťahujú na obsah internetu
- tagy, ale v niektorých prípadoch sa štýly môžu vzťahovať aj na vnútorné prvky.
3. Volič ID CSS
Selektor ID CSS pomáha vývojárovi priraďovať ID vytvorené vývojárom k jeho štýlovému obsahu. Selektor ID sa používa pomocou znamienka hash (#) pred menom ID deklarovaným vývojárom. Selektor ID zodpovedá každému prvku HTML, ktorý má atribút ID, s hodnotou rovnakou ako hodnota selektora, bez znamienka hash.
Tu je príklad:
#box (
width: 90px;
margin: 10px;
)
Tento kód CSS sa môže použiť na priradenie prvku, ktorý má id 'box', ako v nasledujúcej vete.
Tu je značka iba príkladom. Môžeme napísať atribút ID pre akúkoľvek značku HTML. Selektor ID sa zhoduje s atribútom ID v prvku a hľadá jeho štýl. V našom príklade platí, že styling platí, pokiaľ akýkoľvek prvok obsahuje atribút ID „box“.
Hodnota použitého ID má byť jedinečná. Ak sa rovnaký identifikátor použije pre dva alebo viac prvkov, kód je technicky neplatný, ale štýl prvku sa stále bude uplatňovať, a preto sa zvyčajne zabráni rovnakému identifikátoru.
To, že sa zakaždým vyžaduje pre každú stránku HTML iné ID, je dosť rigidné. Okrem problémov s rigiditou čelia selektory IDS v CSS aj otázke špecifickosti.
4. Výber triedy CSS
Selektor triedy CSS je jedným z najužitočnejších selektorov všetkých selektorov. Deklaruje sa pomocou bodky nasledovanej názvom triedy. Tento názov triedy je definovaný kódovačom, ako je to v prípade selektora ID. Selektor triedy vyhľadáva každý prvok, ktorý má hodnotu atribútu s rovnakým názvom ako názov triedy, bez bodky.
Príklad:
.square (
margin: 20px;
width: 20px;
)
Tento kód CSS sa môže použiť, aby sa zhodoval s prvkom, ktorý má triedu 'štvorec, ako v nasledujúcej vete.
Tento štýl sa vzťahuje aj na všetky ostatné prvky HTML s hodnotou atribútu pre triedu ako „štvorec“. Prvok s rovnakou hodnotou atribútu triedy nám pomáha pri opakovanom použití štýlov a vyhýba sa zbytočnému opakovaniu. Selektor tried je navyše prospešný, pretože nám umožňuje pridať k určitému prvku niekoľko tried. K atribútu môžeme pridať viac ako jednu triedu oddelením každej triedy medzerou.
Príklad:
Štvorec, tučné písmo a tvar sú tri rôzne typy tried.
5. Selektor atribútov CSS
Selektor atribútov CSS štýly obsahu podľa atribútu a hodnoty atribútu uvedenej v hranatých zátvorkách. Pred otvorenou hranatou zátvorkou nemôžu byť žiadne medzery.
input(type="text") (
background-color: #fff;
width: 100px;
)
Tento kód CSS by zodpovedal nasledujúcemu prvku HTML.
Podobne, ak sa zmení hodnota atribútu „type“, selektor atribútov by sa nezhodoval. Napríklad selektor by sa nezhodoval s atribútom, ak by sa hodnota „type“ zmenila z „text“ na „send“. Ak je selektor atribútu deklarovaný iba s atribútom a bez hodnoty atribútu, bude sa zhodovať so všetkými prvkami HTML s atribútom „typ“ bez ohľadu na to, či je hodnota „text“ alebo „odoslať“.
Príklad:
input(type) (
background-color: #fff;
width: 100px;
)
Môžeme tiež použiť selektory atribútov bez špecifikácie hodnoty mimo hranatých zátvoriek. Pomôže nám to zamerať iba na atribút, bez ohľadu na prvok. V našom príklade bude zacielená na základe atribútu „typ“ bez ohľadu na prvok „vstup“. Selektory CSS nám pomáhajú zjednodušovať náš kód a umožňujú nám využívať a opätovne používať rovnaký kód CSS pre rôzne prvky HTML. Pomáhajú nám pri navrhovaní konkrétnych segmentov a častí našej webovej stránky. Poskytujú nám možnosť jednotne navrhnúť podobné prvky na našej webovej stránke. Selektory CSS sú preto dôležitou súčasťou učebnej krivky CSS.
Odporúčané články
Toto bol sprievodca Typy selektorov CSS. Tu uvádzame príklady rôznych typov selektorov CSS. Viac informácií nájdete aj v ďalších navrhovaných článkoch -