in

Решаем задачку по CSS: как сделать один элемент разными цветами (без селектора класса)

Парочку tips&tricks

Вы спрашивали: «Как окрасить каждый абзац своим цветом не вмешиваясь в HTML?» Мы отвечаем: «Для таких фокусов в CSS есть специальный псевдокласс nth-child». И сейчас мы рассмотрим один из вариантов его использования.

Для начала разберёмся, что такое псевдокласс. Псевдокласс в CSS  это ключевое слово, добавленное к селектору, которое определяет его особое состояние. Вы точно видели это в стилях ссылок, :active — это и есть тот самый псевдокласс:

# цвет уже нажатой (кликнутой) ссылки станет красным и без подчеркивания

a:active { color: red; text-decoration: none }

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

Как это выглядит?

Самые простые варианты:

Элементы с нечетными номерами (1,3,5, etc): li:nth-child(odd) { color: green;

Элементы с четными номерами (2,4,6, etc): li:nth-child(even) { color: green; }

Последний элемент: li:last-child { color: green; }

Второй элемент с конца: li:nth-last-child(2) { color: green; }

Все элементы, кроме первых пяти: li:nth-child(n+6) { color: green; }

Только первые пять элементов: li:nth-child(-n+5) { color: green; }

Еще примеры:

:nth-child(7)
# Описывает седьмой элемент.

:nth-child(5n)
# Описывает элементы с номерами 5, 10, 15, и т. д.

:nth-child(3n+4)
# Описывает элементы с номерами 4, 7, 10, 13, и т. д.

:nth-child(-n+3)
# Описывает первые три элемента среди группы соседних элементов.

p:nth-child(n)
# Описывает каждый элемент<p> среди группы соседних элементов. Эквивалентно простому селектору p.

p:nth-child(1) или p:nth-child(0n+1)
# Описывает каждый элемент <p>, являющийся первым среди группы соседних элементов. Эквивалентно селектору :first-child.

Условия задачки

  • Выполнить требования ниже НЕ изменяя HTML-код — только через CSS
  • Сделать серый фон
  • Цвет текста абзаца должен соответствовать тексту (первый зеленый, второй синий, последний розовый и т.д.)
  • Скрытый абзац не должен быть виден
  • В абзаце «Красный по центру» должен быть белый фон с красным текстом по центру

Итак, ниже наша заготовка в виде HTML. Обратите внимание — во всех абзацах <p> внутри указаны цвета, в которые их нужно «окрасить». Проблема с селекторами .id и .class тут заключается в том, что они меняют либо один, либо все элементы на странице. Здесь нам нужен другой подход

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <article>
        <p>Green</p>
        <p>Blue</p>
        <div>
            <p>Red centered</p>
        </div>
        <p>Yellow</p>
    <p>Green</p>
    <div class="hidden"><p>Hidden</p></div>
    <p>Green</p>
    <p>Green</p>
    <p>Purple</p>
        <p>Pink</p>
    <hr>
    </article>
</body>
</html>

Теперь пишем код CSS:

article { 
background-color: #e2e2e2; }
div {
display: inline-block;
margin: 0 0 0 25%;
padding: 0px 50px 0px 50px;
background-color: white;
}
div.hidden {
  display: none;
}
p:nth-child(1), p:nth-child(5), p:nth-child(7), p:nth-child(8){
   color: green;
}
p:nth-child(2){
   color: blue;
}
p:nth-child(4){
   color: yellow;
}
p:nth-child(9){
   color: purple;
}
p:nth-child(10){
   color: pink;
}
p:last-child {
    color: red;
}

Сначала мы указываем текст фона (background-color) основного содержимого article. Далее для контейнера div мы прописываем внешние и внутренние отступы. Для div класса hidden — отдельный код. Мы его не прорисовываем (display: none;). Потом идёт в ход псевдокласс nth-child . Мы указываем расположение элемента на странице и задаем ему определенный цвет

Посмотреть пример

Добавить комментарий

Ваш адрес email не будет опубликован.