Селекторы 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>                    

Выход:

Picked HTML CSS-Misc CSS

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

РЕКОМЕНДУЕМЫЕ СТАТЬИ