Начало работы с псевдоклассами и псевдоэлементами CSS
Вы можете использовать селекторы CSS для нацеливания и стилизации элементов на веб-странице. Стандартный селектор может нацеливаться на определенный абзац или все заголовки на определенном уровне. Псевдоселекторы идут еще дальше, позволяя таргетировать части страницы с большим количеством нюансов.
Псевдоклассы нацелены на разные состояния элемента: например, когда указатель наведен на ссылку. Псевдоэлементы позволяют выбрать определенную часть элемента, например первую строку абзаца.
Итак, без лишних слов, давайте объясним основы псевдоклассов и псевдоэлементов.
Что такое псевдокласс?
Псевдокласс – это селектор CSS, который выбирает элементы HTML в определенном состоянии. Некоторые состояния относятся к контексту, например к первому элементу его типа. Другие являются поведенческими, например, когда ссылка наведена указателем мыши. Они позволяют стилизовать контент на основе действий пользователя. В частности, контекстные состояния помогают писать гибкий, удобный и чистый код. Поведенческие состояния предлагают ярлык для функциональности, для которой в противном случае вам, возможно, пришлось бы использовать JavaScript.
Вы можете легко распознать псевдо-классы , как они начинаются с двоеточия (:). Давайте посмотрим на несколько примеров простых псевдоклассов и псевдоклассов действий пользователя.
Пример простого псевдокласса
Сначала напишем HTML-код.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<header>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</header>
<section>
<p>
Voluptatum fuga, impedit sequi totam numquam assumenda repellat
tempora sapiente! Nihil unde vel recusandae, expedita aperiam tempora
totam deserunt non porro reprehenderit.
</p>
<p>
Dicta totam non iusto labore sapiente numquam hic tempora earum,
minima repellendus pariatur fugit nobis ex adipisci, tempore vitae
laboriosam harum. Quidem!
</p>
<p>
Suscipit repellendus cupiditate dignissimos eveniet beatae quas
laudantium, laboriosam minus iusto, corporis ullam alias porro sequi
necessitatibus autem ipsam debitis libero sapiente!
</p>
<p>
Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus.
Molestias exercitationem in quia possimus consectetur dolorum sequi
veniam quo corporis ullam?
</p>
<p>
Suscipit repellendus cupiditate dignissimos eveniet beatae quas
laudantium, laboriosam minus iusto, corporis ullam alias porro sequi
necessitatibus autem ipsam debitis libero sapiente!
</p>
<p>
Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus.
Molestias exercitationem in quia possimus consectetur dolorum sequi
veniam quo corporis ullam?
</p>
<p>
Asperiores illum beatae dolores, dolore quae exercitationem laudantium,
officia nam distinctio tempora deleniti itaque quibusdam iste quo eaque
reiciendis nostrum saepe aperiam?
</p>
</section>
</body>
</html>
Обратите внимание, что в одном разделе есть несколько абзацев. Чтобы стилизовать их индивидуально, вы можете дать каждому отдельный класс и использовать селектор классов CSS. Но это не очень практично, особенно если контент может часто меняться. Вместо этого вы можете использовать псевдоклассы, которых нет в HTML, но которые по-прежнему позволяют настраивать таргетинг и стили для элементов. Посмотрим, как это работает:
CSS
body {
font-size: 1em;
}
header {
font-size: 3em;
}
/* Selecting the first paragraph */
p:first-child {
font-size: 1.3em;
}
/* Selecting the last paragraph */
p:last-child {
color: red;
text-decoration: underline;
}
/* Selecting the nth paragraph */
p:nth-child(3) {
color: blue;
font-style: italic;
}
p:nth-child(4) {
color: #666;
font-size: 1.9em;
}
p:nth-child(5) {
color: yellowgreen;
font-weight: bold;
}Выход:
Используя простые псевдоклассы, такие как : first-child ,: nth-child (x) и ,: last-child, мы можем легко выбирать и стилизовать абзацы. Обратите внимание, что эти псевдоклассы выбирают сами абзацы, а не их дочерние элементы.
Пример псевдокласса действий пользователя
Псевдоклассы действий пользователя или поведения применяются только тогда, когда пользователь взаимодействует с документом. Один из самых популярных примеров включает в себя : link,: посещено ,: hover и : focus . Давайте посмотрим на пример состояния : hover для ссылки и изображения.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<div class="image-box">
<img class="image-back" src="images/By_Unsplash_Search.jpg" alt="Coding on a laptop" />
<img class="img-front" src="images/By_Unsplash.jpg" alt="Search bar with blue background" />
</div>
<div>
<a href="#">Learn more about Pseudo-classes</a>
</div>
</body>
</html>
В этом примере есть два изображения и ссылка. Изображения расположены в одном месте, поэтому вы можете переключать их, скрывая одно и показывая другое.
CSS
body {
font-family: 'Inter', sans-serif;
}
.image-box {
position: relative;
width: 70%;
margin: 5em;
color: #fff;
}
.image-box img {
display: inline-block;
position: absolute;
left: 0;
width: 70%;
}
.image-box img.img-front:hover{
opacity:0;
cursor: pointer;
}
a {
position: absolute;
bottom: 2em;
left: 3em;
text-decoration: none;
color: #222;
display: inline-block;
font-size: 2.5em;
font-weight: 600;
border-bottom: 5px solid rgb(250, 0, 0);
}
a:hover {
color: rgb(250, 0, 0);
border-bottom: none;
}
Этот первый пример демонстрирует эффект наведения курсора на ссылку. CSS меняет свой цвет и границу:
Во втором примере вы можете увидеть эффект наведения курсора на изображение. Его непрозрачность установлена на 0, что фактически делает изображение прозрачным.
Что такое псевдоэлемент?
Псевдоэлемент ведет себя аналогично псевдоклассу. Помните, что псевдокласс применяется к существующему элементу. Между тем, псевдоэлемент действует так, как будто существует новый элемент HTML. Кроме того, псевдоэлемент начинается с двойного двоеточия ( ::) . Посмотрим, как это работает, на примере.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<header>
<div class="header-img">
<img src="By_Unsplash.jpg" alt="Coding on a laptop" />
</div>
</header>
</body>
</html>
Теперь мы будем использовать псевдоэлемент :: before, чтобы добавить текст Learn More, и псевдоэлемент :: after, чтобы добавить текст Buy Now, используя только CSS. Мы также применим свойство position, чтобы разместить эти псевдоэлементы относительно родительского контейнера.
body {
font-family: 'Inter', sans-serif;
color: #666;
}
img {
width: 30em;
vertical-align: middle;
}
.header-img::before {
content: "Learn More";
color: #fff;
background-color: rgb(75, 159, 192);
padding: 0.3em 5em;
display: inline-block;
position: absolute;
top: 25px;
left: -70px;
transform: rotate(-45deg);
}
.header-img::after {
content: "Buy Now";
color: #fff;
background-color: rgb(212, 115, 91);
padding: 0.3em 5em;
display: inline-block;
position: absolute;
bottom: 25px;
right: -70px;
transform: rotate(-45deg);
}
header {
position: relative;
overflow: hidden;
font-weight: 600;
}
header,
section {
width: 30em;
}
Последний эффект накладывает метки в виде ленты в верхнем левом и нижнем правом углу изображения:
Получите в свои руки псевдоклассы и псевдоэлементы
Псевдоклассы и псевдоэлементы CSS при правильном использовании открывают двери для многих возможностей. Поначалу вы можете почувствовать себя ошеломленным, но практика этой техники – ключ к совершенствованию ваших навыков веб-дизайна. Главное – всегда тщательно тестировать свои проекты, используя такие функции, как DevTools Google Chrome.
Мы надеемся, что вы узнали основы псевдоклассов и псевдоэлементов. Помните, что обучение никогда не прекращается! Итак, продолжайте изучать новые селекторы CSS и попробуйте реализовать и протестировать их в своем предстоящем проекте.