Малоизвестные псевдоклассы

В продолжение последней статьи по теме псевдоэлементов и псевдоклассов в CSS, мы рассмотрим редко используемые, но очень полезные псевдоклассы. Ты, скорее всего, слышал про них, но очень мало разработчиков добавили их в свой инструментарий. Подписывайся, чтобы не пропустить новые интересные статьи.

:required

Псевдокласс :required позволяет найти любые input на странице, которые имеют атрибут "required". Это может быть полезно, когда поле, которое перед отправкой формы должно быть заполнено, нам необходимо стилизовать. Как всегда - посмотрим на примере:

// style.css
input:required { 
  border-color: red; 
  line-height: 30px;
}

// index.html
<input value="text1" id="text1" /> 
<input value="text2" id="text2" required/> 
<input value="text3" id="text3" /> 
<input value="text4" id="text4" required/> 
<input value="text5" id="text5" />

:optional

Псевдокласс с обратным действием для :required - позволяет стилизовать необязательные к заполнению поля. В дополнение к предыдущему примеру в файле style.css допишем следующее:

input:optional { 
  border-color: blue; 
  border-radius: 5px; 
  line-height: 50px;
}

Лично я за свою карьеру разработчика встречал кейсы, когда мне бы это понадобилось, от силы пару раз, но тем не менее, знать про такую возможность должен каждый хороший разработчик.

:only-of-type

Достаточно интересный псевдокласс. Сходу даже тяжело придумать реальную ситуацию, когда бы он мог пригодиться. Данный селектор позволяет выбрать все элементы которые являются единственными потомками своего родителя. В данном случае, проще показать, чем рассказать:

// index.html
<div class="container"> 
  <p>Я - текст №1</p> 
  <p>Я - текст №2</p>
  <b>Я - единственный жирный текст</b>
  <p>Я - текст №3</p>
  <p>Я - текст №4</p>
</div>

// style.css
p { 
  color: blue;
}
.container:only-of-type { 
  color: red;
}

В данном случае, тэг <b> является единственным потомком данного типа у .container, поэтому к нему применяется правило. Стоит заметить, что если внутри контейнера мы добавим, к примеру, один единственный тэг <span> - то его к нему так же применится данное правило.

:target

Очень классная штука, лично пользовался ей много раз. Скорее всего, ты видел, как при скроллинге на якорь на странице, к блоку, на котором установлен якорь применяется анимация лёгкой подсветки. Покажу тебе такой кейс, и, конечно, оставлю код:

// style.css

.container:target {
 animation: 1s ease changeColor;
}
@keyframes changeColor {
 from {
   background: blue; 
 } 
 to { 
   background: red; 
 }
}

// index.html

<div class="container"> 
  <a href="#targetElem">
    <button> Кликни на меня </button> 
  </a> 
</div> 
<div class="container"></div> 
<div class="container"></div> 
<div class="container" id="targetElem"> 
  Посмотри, как я меняю цвет, когда ты нажал на кнопку 
</div> 
<div class="container"></div>

В данном кейсе, селектор ":target" срабатывает, когда в URL появляется хэш-якорь "#targetElem". Как только это происходит - запускается анимация смены цвета фона. Ты можешь поиграть со стилями, добавить более приятные цвета, плавный скролл и - вуаля - получается крутой визуальный эффект!
Так же, помимо визуальных эффектов, можно использовать свойство "display", для того, чтобы показывать элемент только тогда, когда пользователь явно к нему перешел, к примеру, в популярном на лендингах блоке "Вопрос-Ответ".

:is()

И последний на сегодня псевдокласс, который позволяет оптимизировать CSS-код, сделать его более читабельным и минимизированным. Данный селектор является функцией, которая принимает как аргумент список других селекторов, и применяет правило к любому из них, который можно выбрать в данный момент.

Применяется, в основном, для оптимизации.

К примеру, данный код:

.container0 p:hover {
  color: white;
}
.container1 p:hover {
  color: white;
}
.container2 p:hover {
  color: white;
}

эквивалентен следующему:

:is(.container0, .container1, .container2) p:hover { 
  color: white;
}

Псевдоклассы в этой статье - лишь малая часть от всех, которые существуют. Списки всех доступных псевдоклассов можно найти в открытой документации по CSS, которая так же досутпна на русском языке.

Надеюсь, ты возьмешь на вооружение данные возможности, подпишешься и будешь с интересом читать новые статьи от меня!