”. În astfel de cazuri, „ :are() ” se folosește pseudo-clasa selectorului de părinte.
Această postare va descrie:
- Cum să stilați un element părinte prin specificarea elementelor sale secundare?
- Cum se selectează toate elementele copil?
- Cum se selectează toate elementele Direct Children?
Cum să stilați un element părinte prin specificarea elementelor sale secundare?
Mai întâi, creați un fișier HTML cu două elemente „div”, după cum urmează:
- Adăugați două „ ” elemente cu aceeași clasă ” părinte-div ”.
- Prima conține două „ ” elemente.
- Al doilea element „
” conține „ ' și ' ”: < div clasă = 'parent-div' >
< p > Buna ziua < / p >
< p > lume < / p >
< / div >
< div clasă = 'parent-div' >
< h1 > Salut < / h1 >
< p > Am eticheta „h1”. < / p >
< / div >Dacă este necesar să stilați elementul „
” având „ ”, apoi putem ajusta stilul elementului părinte ținând copilul. În acest scop, putem folosi „ :are() ” selector.
Din ambele elemente „
”, selectați-l pe cel care conține elementul „” folosind „ .class-name:has(nume-copil) ”:
.părinte-div : are ( h1 ) {
culoare de fundal : #103e6d ;
culoare : scoici ;
lăţime : 150px ;
înălţime : 150px ;
hotar-raza : cincizeci% ;
aliniere text : centru ;
}Aici, am aplicat următoarele proprietăți CSS pe elementul părinte:
- „ culoare de fundal ” este folosit pentru a specifica culoarea de fundal a elementului.
- „ culoare ” specifică culoarea textului elementului.
- „ lăţime ” este folosit pentru a defini lățimea elementului.
- „ înălţime ” precizează înălțimea elementului.
- „ hotar-raza ” proprietatea este folosită pentru a seta colțurile rotunjite ale elementului.
- „ aliniere text ” specifică alinierea textului.
Ieșire
Cum se selectează toate elementele copil?
Pentru a selecta elementul copil cu ajutorul selectorului părinte, parcurgeți exemplul dat.
Exemplu
Implementați următorii pași pentru a crea o pagină HTML:
- Adăugați un element div care conține două „ etichete „ și un „ „etichetă având clasa „ copil-div ”.
- Copilul ' div „elementul” conține un element „
< div clasă = 'parent-div' >”:
< p > Buna ziua < / p >
< p > lume < / p >
< div clasă = 'copil-div' >
< p > sunt copil div < / p >
< / div >
< / div >Putem selecta elemente copil prin părintele „
” clasa. Acest lucru nu va selecta doar direct „ p ” dar selectează și elementele „ imbricate p ” elemente: .părinte-div p {
culoare de fundal : #7F167F ;
familie de fonturi : cursiv ;
marimea fontului : 25px ;
aliniere text : centru ;
culoare : fum alb ;
}Ieșire
Cum se selectează toate elementele Direct Children?
Pentru a selecta copilul direct al div-ului părinte, putem folosi „ > ” simbol. Acest lucru va ajuta la selectarea tuturor elementelor „p” care sunt copilul direct al părintelui „
”. De exemplu, am aplicat următoarele proprietăți CSS: .părinte-div > p {
culoare de fundal : #7F167F ;
familie de fonturi : cursiv ;
marimea fontului : 30px ;
aliniere text : centru ;
culoare : fum alb ;
}„ familie de fonturi ” specifică fontul elementului selectat și „ marimea fontului ” este folosit pentru a defini dimensiunea fontului:
Ieșire
Am discutat despre selectoarele părinte CSS în HTML și CSS.
Concluzie
În CSS, „ :are() ” selector este utilizat ca pseudo-clasă de selector părinte. Este folosit în special pentru a selecta elementele părinte. De exemplu, ' .parent-div:has(h1) ” selectează elementul părinte având „ ” elemente. Pentru a selecta elementul copil al elementului părinte, utilizați „ .parent-div p ”. Instrucțiunea de condiție poate fi folosită și pentru a selecta toate elementele secundare directe. Acest articol a explicat selectorul părinte CSS cu exemple.
- Copilul ' div „elementul” conține un element „