Селекторы CSS Child vs Descendant

Опубликовано: 2 Февраля, 2022

Дочерний селектор: Дочерний селектор используется для сопоставления всех элементов, которые являются дочерними по отношению к указанному элементу. Он дает отношение между двумя элементами. Селектор 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>                    

Выход: