Селекторы CSS Child vs Descendant
Дочерний селектор: Дочерний селектор используется для сопоставления всех элементов, которые являются дочерними по отношению к указанному элементу. Он дает отношение между двумя элементами. Селектор element> element выбирает те элементы, которые являются потомками определенного родителя. Операнд слева от> - это родительский элемент, а операнд справа - дочерний элемент.
Синтаксис:
element> element { // Свойство CSS }
Example: Match all <h2> element that are child of only <div> element.
<!DOCTYPE html> < html > < head > < title > CSS child Selector </ title > < style > div > p { color:white; background: green; padding:2px; } </ style > </ head > < body style = "text-align: center;" > < div > < h2 style = "color:green;" > CSS Child Selector </ h2 > < p > A computer science portal for geeks. </ p > </ div > < p >Geeks Classes is a quick course to cover algorithms questions.</ p > < p >This paragraph will not be styled.</ p > </ body > </ html > |
Выход:
Селектор потомков: Селектор потомков используется для выбора всех элементов, которые являются дочерними по отношению к элементу (а не к конкретному элементу). Он выбирает элементы внутри элементов, то есть объединяет два селектора, так что элементы, соответствующие второму селектору, выбираются, если у них есть элемент-предок, соответствующий первому селектору.
Синтаксис:
element element { // Свойство CSS }
Example: It selects all the h2 element which are child element of div.
<!DOCTYPE html> < html > < head > < title > CSS Descendant Selector </ title > < style > div h2 { font-size:26px; } </ style > </ head > < body style = "text-align:center;" > < div > < h2 style = "color:green;" > GeeksForGeeks </ h2 > < div > < h2 >GeeksForGeeks</ h2 > </ div > </ div > < p > GeeksforGeeks in green color is example of child Selector < br >other GeekforGeeks is example of descendant Selector </ p > </ body > </ html > |
Выход: