Псевдоклассы дочерних элементов

Особую группу псевдоклассов образуют псевдоклассы, которые позволяют выбрать определенные дочерние элементы:

• :first-child: представляет элемент, который является первым дочерним элементом
• :last-child: представляет элемент, который является последним дочерним элементом
• :only-child: представляет элемент, который является единственным дочерним элементом в каком-нибудь контейнере
• :only-of-type: выбирает элемент, который является единственным элементом определенного типа (тега) в каком-нибудь контейнере
• :nth-child(n): представляет дочерний элемент, который имеет определенный номер n, например, второй дочерний элемент
• :nth-last-child(n): представляет дочерний элемент, который имеет определенный номер n, начиная с конца
• :nth-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер
• :nth-last-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер, начиная с конца

Псевдокласс first-child

Стиль по селектору a:first-child применяется к ссылке, если она является первым дочерним элементом любого элемента.

    <style>
    a:first-child{
    
    color: red;
    }
    </style>
    
    <h3>Планшеты
    <div>
    <a>Microsoft Surface Pro 4</a><br/>
    <a>Apple iPad Pro</a><br/>
    <a>ASUS ZenPad Z380KL</a>
    </div>
    <h3>Смартфоны</h3>
    <div>
    <p>Топ-смартфоны 2016</p>
    <a>Samsung Galaxy S7</a><br/>
    <a>Apple iPhone SE</a><br/>
    <a>Huawei P9</a>
    </div>
    

Псевдокласс last-child

Селектор a:last-child определяет стиль для ссылок, которые являются последними дочерними элементами:

    <style>
    a:last-child{
    
    color: blue;
    }
    </style>
   
   <h3>Смартфоны</h3>
   <div>
   <p>Топ-смартфоны 2016</p>
   <a>Samsung Galaxy S7</a><br/>
   <a>Apple iPhone SE</a><br/>
   <a>Huawei P9</a>
   </div>
    <h3>Планшеты</h3>
    <tdiv>
    <a>Microsoft Surface Pro 4</a><br/>
    <a>Apple iPad Pro</a><br/>
    <a>ASUS ZenPad Z380KL</a>
    </div>
    

Селектор only-child

Селектор :only-child выбирает элементы, которые являются единственными дочерними элементами в контейнерах:

    <style>
    p:only-child{
    color:red;
    }
    </style>
    <h2>Заголовок</h2>
    <div>
    <p>Текст1</p>
    </div>
    <tdiv>
    <p>Текст2</p>
    <p>Текст3</p>
    </div>
    <div>
    <p>Текст4</p>
    </div>
    

Псевдокласс only-of-type

Псевдокласс only-of-type выбирает элемент, который является единственным элементом определенного типа в контейнере. Например, единственный элемент div, при этом элементов других типов в этом же контейнере может быть сколько угодно.

    <style>
    span:only-of-type{
    
    color: green;	/* зеленый цвет */
    }
    p:only-of-type{
    
    color: red;	/* красный цвет */
    }
    div:only-of-type{
    
    color: blue;	/* синий цвет */
    }
    </style>
    </head>
    <div>
    Header
    </div>
    <p>Единственный параграф и <span>элемент спан</span></p>
    <tdiv>
    Footer
    </div>
   

Псевдокласс nth-child

Псевдокласс nth-child позволяет стилизовать каждый второй, третий элемент, только четные или только нечетные элементы и т.д.

Чтобы определить стиль для нечетных элементов, в селектор передается значение "odd": tr:nth-child(odd){} Для стилизации четных элементов в селектор передается значение "even": tr:nth-child(even){} Также в этот селектор мы можем передать номер стилизуемого элемента: tr:nth-child(3) { background-color: #bbb; } В данном случае стилизуется третья строка.

Еще одну возможность представляет использование заменителя для номера, который выражается буквой n: tr:nth-child(2n+1) { background-color: #bbb; } Здесь стиль применяется к каждой второй нечетной строке.

К примеру, если мы хотим выделить каждый третий элемент, начиная со второго, то мы могли бы написать: tr:nth-child(3n+2) { background-color: #bbb; }

    <style>
    tr:nth-child(odd) { background-color: #bbb; }
    tr:nth-child(even) { background-color: #fff; }
    tr:nth-child(2n+5) { background-color: yellow; }
    tr:nth-child(2n+5) { background-color: pink; }
    </style>
    <h3>Смартфоны</h3>
    <table>
    <tr><td>Samsung</td><td>Galaxy S7 Edge</td><</td>60000</td></tr>
    <tr><td>Apple</td><td>iPhone SE</td><td>39000</td></tr>
    <tr><td>Microsoft</td><td>Lumia 650</td><td>13500</td></tr>
    <tr><td>Alcatel</td><td>Idol S4</td><td>30000</td></tr>
    <tr><td>Huawei</td><td>P9</td><td>60000</td></tr>
    <tr><td>HTC</td><td>HTC 10</td><td>50000</td></tr>
    <tr><td>Meizu</td><td>Pro 6</td><td>40000</td></tr>
    <tr><td>Xiaomi</td><td>Mi5</td><td>35000</td></tr>
    </table>
    

Псевдокласс :nth-last-child по сути предоставляет ту же самую функциональность, только отсчет элементов идет не с начала, а с конца:

    tr:nth-last-child(2) { 
    background-color: #bbb; /* 2 строка с конца, то есть предпоследняя  */
    }
    tr:nth-last-child(2n+1) {  
    background-color: #eee; /* нечетные строки, начиная с конца  */
    }
    

Псевдокласс nth-of-type

Псевдокласс :nth-of-type позволяет выбрать дочерний элемент определенного типа по определенному номеру:

    tr:nth-of-type(2) { 
    background-color: #bbb;
    }
    

Аналогично работает псевдокласс nth-last-of-type, только теперь отсчет элементов идет с конца:

    tr:nth-last-of-type(2n) { 
    background-color: #bbb;
    }