Овај пост ће описати:
- Како стилизовати родитељски елемент тако што ћете навести његове подређене елементе?
- Како одабрати све подређене елементе?
- Како одабрати све елементе Дирецт Цхилдрен?
Како стилизовати родитељски елемент тако што ћете навести његове подређене елементе?
Прво направите ХТМЛ датотеку која има два елемента „див“ на следећи начин:
- Додајте два ' <див> ” елементи са истом класом “ родитељ-див ”.
- Први садржи два „ <п> ” елементи.
- Други елемент „<див>” садржи „ <х1> ' и ' <п> ”:
< стр > Здраво < / стр >
< стр > свет < / стр >
< / див >
< див класа = 'родитељ-див' >
< х1 > Здраво < / х1 >
< стр > Имам ознаку 'х1'. < / стр >
< / див >
Ако је потребно стилизовати елемент „<див>” који има „ <х1> ” елемент, онда можемо да прилагодимо стил родитељског елемента држећи дете. У ту сврху можемо користити „ :хас() ” селектор.
Из оба елемента „<див>” изаберите онај који садржи елемент „<х1>” користећи „ .цласс-наме:хас(цхилд-наме) ”:
.парент-див : има ( х1 ) {
боја позадине : #103е6д ;
боја : шкољка ;
ширина : 150пк ;
висина : 150пк ;
граница-радијус : педесет% ;
Поравнање текста : центар ;
}
Овде смо применили следећа ЦСС својства на родитељски елемент:
- “ боја позадине ” се користи за одређивање боје позадине елемента.
- “ боја ” одређује боју текста елемента.
- “ ширина ” се користи за дефинисање ширине елемента.
- “ висина ” одређује висину елемента.
- “ граница-радијус ” својство се користи за постављање заобљених углова елемента.
- “ Поравнање текста ” одређује поравнање текста.
Излаз
Како одабрати све подређене елементе?
Да бисте изабрали подређени елемент уз помоћ родитељског селектора, прођите кроз дати пример.
Пример
Спроведите следеће кораке да бисте направили ХТМЛ страницу:
- Додајте див елемент који садржи два „ <п> ” ознаке и “ <див> “ознака која има класу” дете-див ”.
- Дете ' див ” елемент садржи „<п>” елемент:
< стр > Здраво < / стр >
< стр > свет < / стр >
< див класа = 'цхилд-див' >
< стр > ја сам дете див < / стр >
< / див >
< / див >
Можемо изабрати подређене елементе преко родитељског „ <див> ' класа. Ово неће само изабрати његов директан “ стр ” елементе, али такође бира угнежђени „ стр ” елементи:
.парент-див стр {боја позадине : #7Ф167Ф ;
породица фонтова : курзивни ;
фонт-сизе : 25пк ;
Поравнање текста : центар ;
боја : Бели дим ;
}
Излаз
Како одабрати све елементе Дирецт Цхилдрен?
Да бисмо изабрали директно дете родитељског дива, можемо користити „ > ” симбол. Ово ће помоћи да се изаберу сви 'п' елементи који су директно дете родитељског ' <див> ”. На пример, применили смо следећа ЦСС својства:
.парент-див > стр {боја позадине : #7Ф167Ф ;
породица фонтова : курзивни ;
фонт-сизе : 30пк ;
Поравнање текста : центар ;
боја : Бели дим ;
}
„ породица фонтова ” одређује фонт изабраног елемента и „ фонт-сизе ” се користи за дефинисање величине фонта:
Излаз
Разговарали смо о ЦСС родитељским селекторима у ХТМЛ-у и ЦСС-у.
Закључак
У ЦСС-у, „ :хас() ” селектор се користи као псеудо-класа родитељског селектора. Посебно се користи за одабир родитељских елемената. На пример, ' .парент-див:хас(х1) ” бира родитељски елемент који има „ <х1> ” елементи. Да бисте изабрали подређени елемент родитељског елемента, користите „ .парент-див стр ”. Наредба услова се такође може користити за одабир свих директних подређених елемената. Овај чланак је објаснио ЦСС родитељски селектор са примерима.