Псевдоклассы структуры

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

Псевдоклассы структуры в CSS позволяют выбирать и стилизовать элементы на основе их положения в дереве документа. Это особенно полезно для создания более точных и детализированных стилей, применяемых к определенным элементам. Рассмотрим псевдоклассы :first-child, :last-child, :nth-child и :nth-of-type.

Псевдокласс :first-child выбирает первый дочерний элемент своего родителя. Это полезно для стилизации первого элемента в группе однотипных элементов, таких как списки или абзацы.

Синтаксис:

    
      селектор:first-child {
        свойства: значения;
      }
    
  

Пример использования

В этом примере первый элемент списка выделяется жирным шрифтом и красным цветом, а первый параграф внутри div преобразуется в верхний регистр:

    
      /* Стилизация первого элемента списка */

      li:first-child {
        font-weight: bold;
        color: red;
      }

      /* Стилизация первого параграфа в div */

      div p:first-child {
        text-transform: uppercase;
      }
    
  

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

Псевдокласс :last-child выбирает последний дочерний элемент своего родителя. Он используется для стилизации последнего элемента в группе однотипных элементов.

Синтаксис:

    
      селектор:last-child {
        свойства: значения;
      }
    
  

Пример использования

В этом примере последний элемент списка выделяется курсивом и синим цветом, а последний параграф внутри div подчеркивается:

    
      /* Стилизация последнего элемента списка */

      li:last-child {
        font-style: italic;
        color: blue;
      }

      /* Стилизация последнего параграфа в div */

      div p:last-child {
        text-decoration: underline;
      }
    
  

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

Псевдокласс :nth-child позволяет выбирать элементы на основе их позиции в группе. Он принимает аргумент, который определяет, какие элементы будут выбраны. Аргумент может быть числом, ключевым словом или выражением.

Синтаксис:

    
      селектор:nth-child(аргумент) {
        свойства: значения;
      }
    
  

Аргументы:

• Число: выбирает элемент на указанной позиции
• Ключевые слова: odd (нечетные) и even (четные)
• Выражение: формат an+b, где a и b — числа

Пример 1: Выбор нечетных элементов

В этом примере стилизуются все нечетные элементы списка, задавая им светло-серый фон:

    
      /* Стилизация нечетных элементов списка */

      li:nth-child(odd) {
        background-color: #f0f0f0;
      }
    
  

Пример 2: Выбор элементов на определенной позиции

В этом примере третий элемент списка выделяется жирным шрифтом и зеленым цветом:

    
      /* Стилизация третьего элемента списка */

      li:nth-child(3) {
        font-weight: bold;
        color: green;
      }
    
  

Пример 3: Использование выражений

В этом примере стилизуются каждый второй элемент, начиная с первого, задавая им светло-серый фон:

    
      /* Стилизация каждого второго элемента, начиная с первого */

      li:nth-child(2n+1) {
        background-color: #e0e0e0;
      }
    
  

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

Псевдокласс :nth-of-type похож на :nth-child, но он выбирает элементы на основе их типа среди дочерних элементов общего родителя. Это позволяет выбирать определенные типы элементов, даже если они не являются первыми детьми своего родителя.

Синтаксис:

    
      селектор:nth-of-type(аргумент) {
        свойства: значения;
      }
    
  

Аргументы:

• Число: выбирает элемент на указанной позиции среди элементов того же типа
• Ключевые слова: odd (нечетные) и even (четные)
• Выражение: формат an+b, где a и b — числа

Пример 1: Выбор четных параграфов

В этом примере стилизуются все четные параграфы, задавая им светло-серый фон:

    
      /* Стилизация четных параграфов */

      p:nth-of-type(even) {
        background-color: #d0d0d0;
      }
    
  

Пример 2: Выбор элементов на определенной позиции среди одного типа

В этом примере второй заголовок h2 увеличивается в размере и окрашивается в оранжевый цвет:

    
      /* Стилизация второго заголовка h2 */

      h2:nth-of-type(2) {
        font-size: 2em;
        color: orange;
      }
    
  

Пример 3: Использование выражений

В этом примере стилизуются каждый третий элемент списка, начиная со второго, задавая им светло-серый фон:

    
      /* Стилизация каждого третьего элемента списка, начиная со второго */

      li:nth-of-type(3n+2) {
        background-color: #c0c0c0;
      }
    
  

1

Задача

Модуль 1: Web Core, 15 уровень, 2 лекция

Недоступна

Четные элементы

Четные элементы

Открыть

1

Задача

Модуль 1: Web Core, 15 уровень, 2 лекция

Недоступна

Каждый 3-е элемент

Каждый 3-е элемент

Открыть