În CSS, selecțiile pot fi simple sau complexe, în funcție de cum sunt construite.
Aceste selecții sunt folosite pentru a identifica și aplica stiluri asupra elementelor HTML în pagină. Să explorăm mai detaliat diferențele dintre selecțiile simple și complexe:
Selecții Simple:
Selectarea pe bază de nume de element: Selectați toate instanțele unui anumit element HTML. Exemplu:
pselectează toate elementele<p>(paragrafele).Selectarea pe bază de clasă: Selectați elementele care au o anumită clasă atribuită. Exemplu:
.highlightselectează toate elementele cu clasahighlight.Selectarea pe bază de ID: Selectați un element specific folosind ID-ul său unic. Exemplu:
#main-titleselectează elementul cu ID-ulmain-title.
Selecții Complexe:
Selectarea prin înlănțuire: Combinarea a două sau mai multe selecții simple într-o singură selecție. Exemplu:
header navselectează toate elementele<nav>din cadrul unui element<header>.Selectarea copilului direct: Selectați un element care este copil direct al altui element. Exemplu:
ul > liselectează toate elementele<li>care sunt copii direcți ai unui element<ul>.Selectarea după clasă în interiorul unui element: Selectați elementele cu o anumită clasă în cadrul unui alt element. Exemplu:
article .infoselectează elementele cu clasa.infoîn interiorul elementelor<article>.Selectarea prin combinarea clasei și a numelui de element: Combinați numele elementului și clasa pentru a selecta elementele cu o anumită clasă în cadrul unui tip specific de element. Exemplu:
h2.titleselectează toate elementele<h2>cu clasa.title.Selectarea prin atribut: Selectați elementele în funcție de anumite atribute. Exemplu:
input[type="text"]selectează toate elementele<input>de tip text.
Exemple Practice CSS si HTML:
Foloseste butonul Testare sau Salveaza ca HTMl si deschide pagina in browser.Lecții Invatare HTML
Lecții CSS
În acest exemplu, fiecare tip de selecție este ilustrat astfel:
h1: Stilizează toate elementele<h1>pentru a avea culoarea albastră.nav a: Stilizează toate elementele<a>din interiorul unui<nav>pentru a nu avea subliniere și pentru a avea culoarea verde.article .title: Stilizează elementele cu clasa.titledin interiorul elementelor<article>pentru a avea dimensiunea fontului mărită și pentru a avea bold.article.info: Stilizează elementele<article>cu clasa.infopentru a avea un fundal de culoare deschisă și un spațiu de padding.nav > ul: Stilizează toate elementele<ul>care sunt copii direcți ai unui<nav>pentru a nu avea stilurile implicite ale listei.nav ul li: Stilizează toate elementele<li>din interiorul unui<ul>din interiorul unui<nav>pentru a avea margin-top și margin-bottom.article h2 + p: Stilizează paragraful care urmează un element<h2>din interiorul unui<article>pentru a avea stil italic.input[type="text"]: Stilizează toate elementele<input>de tip text pentru a avea un chenar subțire și un spațiu de padding.
Aceste exemple practice ilustrează modul în care puteți folosi diverse tipuri de selecții pentru a aplica stiluri specifice elementelor HTML într-o pagină web.