HTML: Как сделать, чтобы 2 элемента с 1 классом выделялись по отдельности?

HTML является основой создания веб-страниц, и каждый элемент может иметь уникальные идентификаторы и классы. Классы используются для группировки элементов, которые выглядят похожими. Однако, если у вас есть два элемента с одним и тем же классом, то они выделятся одновременно. В этой статье мы рассмотрим, как сделать, чтобы два элемента с одинаковым классом выделялись по отдельности.

Использование уникальных идентификаторов

Первый способ заключается в использовании уникальных идентификаторов для каждого элемента. Для этого вам нужно добавить атрибут id к каждому элементу и присвоить им уникальное имя:

<div id="first-element" class="my-class">Первый элемент</div>
<div id="second-element" class="my-class">Второй элемент</div>

Теперь вы можете применить стили к каждому элементу по отдельности, используя соответствующий идентификатор в вашем CSS:

#first-element {
  background-color: lightblue;
}

#second-element {
  background-color: pink;
}

Использование псевдокласса :nth-of-type()

Второй способ заключается в использовании псевдокласса :nth-of-type(). Этот псевдокласс выбирает элементы, которые являются определенным типом и находятся в определенной позиции внутри своего родительского элемента.

<div class="my-class">Первый элемент</div>
<div class="my-class">Второй элемент</div>

Теперь вы можете указать, какой элемент выбирается, используя :nth-of-type() в вашем CSS:

.my-class:nth-of-type(1) {
  background-color: lightblue;
}

.my-class:nth-of-type(2) {
  background-color: pink;
}

Этот CSS выберет первый и второй элемент с классом my-class и применит к ним соответствующие стили.

Заключение

Как мы видим, есть несколько способов сделать два элемента с одинаковым классом выделялись по отдельности. Вы можете использовать уникальные идентификаторы или псевдокласс :nth-of-type(). Каждый из этих способов может быть применен в зависимости от вашей задачи. Однако, не стоит злоупотреблять использованием уникальных идентификаторов, поскольку это может привести к сложному поддержанию и расширению вашего кода.