Úvod do typů selektorů CSS
Typy CSS Selektorů se používají k výběru obsahu, který chceme stylizovat. Pomáhá při výběru prvků na základě jejich třídy, id, typu atd. Selektor CSS je součástí sady pravidel CSS.
Typy selektorů CSS
K dispozici je 5 druhů CSS Selectors. Budeme se zabývat následujícími důležitými selektory CSS:
- Univerzální selektor CSS.
- Výběr prvku CSS.
- Selektor id CSS.
- Výběr třídy CSS.
- Výběr atributu CSS.
1. Univerzální selektor CSS
Na stránce HTML závisí obsah na značkách HTML. Pár značek definuje konkrétní prvek webové stránky. Univerzální selektor CSS vybírá všechny prvky na webové stránce.
Příklad:
* (
color: blue;
font-size: 21px;
)
Tyto dva řádky kódu obklopené složenými závorkami ovlivní všechny prvky přítomné na stránce HTML. Vyhlašujeme univerzální selektor pomocí hvězdičky na začátku složené ortézy. Univerzální selektor lze použít společně s ostatními selektory v kombinaci.
2. Výběr prvku CSS
Selektor prvků CSS je také známý jako selektor typu. Selektor prvků v CSS se snaží shodovat prvky HTML se stejným názvem. Proto selektor
- odpovídá všem
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Cheatheet CSS3
- CSS Interview Otázky
- SASS vs SCSS
- SASS Interview Otázky
- Příklady seznamu objednávek HTML
- prvky, tj. všechny neuspořádané seznamy na dané stránce HTML.
Podívejme se na příklad pro výběr prvku.
ul (
border: solid 1px #ccc;
)
Abychom to lépe pochopili, podívejme se na ukázkový kód HTML, abychom použili kód CSS, který jsme napsali výše.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Ukázkový text
V tomto příkladu najdeme hlavně tři prvky, jmenovitě
- prvek, značka a další
- živel. Protože náš kód CSS se vztahuje na
- konkrétně, budou změny na okraji provedeny pouze pro naše
- tagy a ne pro tagy. Tyto změny se obvykle nevztahují na obsah
- tagy také, ale v některých scénářích se styly mohou vztahovat na vnitřní prvky.
3. Volič ID CSS
Selektor CSS ID pomáhá vývojáři přiřadit ID vytvořené vývojářem k jeho stylingovému obsahu. Selektor ID se používá pomocí znaku hash (#) před jménem ID deklarovaným vývojářem. Selektor ID odpovídá každému prvku HTML, který má atribut ID, s hodnotou stejnou jako hodnota selektoru, bez znaménka hash.
Zde je příklad:
#box (
width: 90px;
margin: 10px;
)
Tento kód CSS lze použít k přiřazení prvku, který má id 'box', jako v následující větě.
Zde je značka pouze příkladem. Můžeme napsat atribut ID pro jakoukoli značku HTML. Selektor ID odpovídá atributu ID v prvku a hledá jeho styl. V našem příkladu platí styl, pokud jakýkoli prvek obsahuje atribut ID 'box'.
Hodnota použitého ID má být jedinečná. Pokud je stejný identifikátor použit pro dva nebo více prvků, je kód technicky neplatný, ale styl prvku bude stále platit, a proto je obvykle stejné ID vyloučeno.
To, že pokaždé potřebujete pro každou stránku HTML použít jiné ID, je docela rigidní. Kromě problémů s rigiditou čelí selektoři ID v CSS také problému specifičnosti.
4. Výběr třídy CSS
Výběr třídy CSS je jedním z nejužitečnějších selektorů všech selektorů. Deklaruje se pomocí tečky následované názvem třídy. Tento název třídy je definován kodérem, jako je tomu v případě selektoru ID. Selektor třídy hledá každý prvek, který má hodnotu atributu se stejným názvem jako název třídy, bez tečky.
Příklad:
.square (
margin: 20px;
width: 20px;
)
Tento kód CSS lze použít k tomu, aby odpovídal prvku majícímu čtverec třídy, jako v následující větě.
Tento styl platí také pro všechny ostatní prvky HTML, které mají hodnotu atributu pro třídu jako „čtverec“. Prvek se stejnou hodnotou atributu třídy nám pomáhá při opakovaném použití stylů a zabraňuje zbytečnému opakování. Výběr třídy je navíc výhodný, protože nám umožňuje přidat k určitému prvku několik tříd. K atributu můžeme přidat více než jednu třídu oddělením každé třídy mezerou.
Příklad:
Čtvereček, tučné písmo a tvar jsou tři různé typy tříd.
5. Selektor atributů CSS
Selektor atributů CSS styly obsahu podle atributu a hodnoty atributu uvedené v hranatých závorkách. Před otevřením hranaté závorky nemohou být žádné mezery.
input(type="text") (
background-color: #fff;
width: 100px;
)
Tento kód CSS by odpovídal následujícímu prvku HTML.
Podobně, pokud se změní hodnota atributu „typ“, selektor atributů by se neshodoval. Selektor by například neodpovídal atributu, pokud by se hodnota „type“ změnila z „text“ na „send“. Pokud je volič atributů deklarován pouze s atributem a bez hodnoty atributu, bude se shodovat se všemi prvky HTML s atributem „typ“, bez ohledu na to, zda je hodnota „text“ nebo „odeslat“.
Příklad:
input(type) (
background-color: #fff;
width: 100px;
)
Můžeme také použít selektory atributů bez specifikace hodnoty mimo hranaté závorky. To nám pomůže cílit pouze na atribut, bez ohledu na prvek. V našem příkladu bude cílit na základě atributu 'type', bez ohledu na prvek 'input'. Selektory CSS nám pomáhají zjednodušit náš kód a umožňují nám použít a znovu použít stejný kód CSS pro různé prvky HTML. Pomáhají nám při navrhování konkrétních segmentů a částí naší webové stránky. Poskytují nám možnost jednotné úpravy podobných prvků na naší webové stránce. Selektory CSS jsou tedy důležitou součástí křivky učení CSS.
Doporučené články
Toto byl průvodce typy selektorů CSS. Zde diskutujeme různé typy selektorů CSS s příkladem. Další informace naleznete také v dalších navrhovaných článcích -