Во многих случаях вы хотите изменить элемент своего веб-сайта с помощью CSS, но когда вы собираетесь это сделать, вы понимаете, что элемент не имеет никакого класса или идентификатора.
Не волнуйтесь, не все потеряно.
Благодаря псевдоклассам мы можем сделать гораздо больше, чем вы себе представляете, и в этом уроке мы увидим, как это сделать.
Все, что мы увидим в этом уроке он работает для любой страницы, которую вы создаете с помощью HTML и CSS.
И в частности, конечно, это справедливо для WordPress, ведь в наших примерах мы будем делать это в WordPress.
📺️ Видеоурок:
Suscríbete a mi канал:
:first-of-type Изменить только первый элемент
Этот псевдокласс позволяет нам изменять только первый элемент своего типа среди группы родственных элементов.
Теперь мы увидим конкретные примеры, но вот вам помощь очень хорошо об этом псевдоклассе.
Первое, что мы собираемся изменить, это первый элемент меню:
Обычно, когда я хочу что-то изменить, я захожу в инспектор элементов моего браузера (правая кнопка -> Проверить) и проверяю, имеет ли изменяемый элемент класс или идентификатор:
Элемент, который я хочу изменить, имеет определенный идентификатор, поэтому мне действительно не нужно использовать псевдоклассы.
Но представьте, что вы его видели и я не знаю, что у него есть идентификатор 🙈
Я собираюсь изменить этот элемент, как если бы этого идентификатора не существовало.
Чтобы использовать псевдоклассы, я должен добавить псевдокласс, которому предшествует двоеточие:
#top-menu li:first-of-type {
margin-right: 140px;
}
И вот результат:
Как мы видим на скриншоте выше, к первому элементу применяется только правое поле.
:last-of-type Изменить только последний элемент
Так же, как и в предыдущем примере, мы можем изменить только последний элемент.
На этот раз мы будем использовать :last-of-type следующим образом:
#top-menu li:last-of-type {
margin-right: 140px;
}
И результатом будет:
:nth-of-type Изменить элемент или элементы, которые мы хотим
Этот псевдокласс очень мощный, потому что мы можем ссылаться на любой конкретный элемент, который мы хотим, или создавать шаблоны для выбора нескольких элементов.
Давайте представим, что мне нужно изменить второй элемент моего меню, для этого мы будем использовать nth-of-type следующим образом:
#top-menu li:nth-of-type(2) {
margin-right: 140px;
}
Создание шаблонов с помощью :nth-of-type на четных элементах
Если вместо ссылки на конкретный элемент мы хотим ссылаться на элемент через каждые n элементов, мы должны сделать это следующим образом:
#top-menu li:nth-of-type(2n) {
margin-right: 140px;
}
И результатом будет применение поля ко второму и четвертому элементам:
Создание шаблонов с помощью :nth-of-type на нечетных элементах
Точно так же мы можем обращаться к нечетным элементам следующим образом:
#top-menu li:nth-of-type(2n+1) {
margin-right: 140px;
}
И результатом будет:
Добавить изменения CSS в WordPress
Мы вносили изменения CSS в инспектор элементов. И это здорово, чтобы проверить это, но как только мы обновим страницу, изменения исчезнут, поскольку эти изменения сохраняются не в Интернете, а в нашем собственном браузере.
Чтобы добавить изменения в WordPress, есть много способов, от изменения файла CSS нашего шаблона до использования самого интерфейса WordPress.
Мы собираемся использовать сам интерфейс WordPress, для этого переходим в меню «Настроить» -> «Добавить дополнительный CSS»:
Мы нажимаем и попадаем на экран, где мы должны добавить CSS:
Бонусный трек: добавление псевдокласса к дочернему элементу
Как мы видели, эти псевдоклассы позволяют нам легко модифицировать родственные элементы, то есть элементы, находящиеся на одном уровне.
Но давайте представим, что мы хотим изменить цвет нечетных элементов нашего меню.
Цвет определяется не в элементе списка (li), а в элементе ссылки (a), который находится внутри элемента списка:
Если мы посмотрим на инспектор элементов:
Если мы присмотримся, то увидим, что мы не смогли создать шаблон следующим образом:
#top-menu li a:nth-of-type(2n+1) {
color: red;
}
Поскольку каждая ссылка находится в другом li, все они будут первым элементом и все они изменят цвет:
Что нам нужно сделать, так это применить шаблон с псевдоклассом к элементу li следующим образом:
#top-menu li:nth-of-type(2n+1) a {
color: red;
}
В результате получилось то, что мы действительно хотели:
Как мы видели, это не конец света, если у нас нет идентификатора или класса.
Благодаря псевдоклассам мы можем получить доступ практически к любому элементу нашего HTML.
Надеюсь вам понравилось 😉