Выберите самый первый элемент с классом на странице
Проблема очень проста: Я не могу найти способ выбрать (только с помощью css) самый первый элемент на странице с определенным классом.
Например, с помощью этого HTML-кода я хотел бы выбрать первый элемент с классом .elem:
.elem:nth-of-type(1) {
background-color: yellow;
}<div class = "wrapper">
<div class = "elem">elem that I'd like to select</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
</div>
<div class = "wrapper">
<div class = "elem">Unfortunately, this elem is selected too</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
</div>Текущее поведение похоже на функцию js querySelectorAll, но ожидаемое поведение — это querySelector:
document.querySelectorAll('.elem:nth-of-type(1)') // Current behavior is like this
document.querySelector('.elem:nth-of-type(1)') // Expected behavior is like this
Существуют ли приемы CSS, которые могут делать то, что я хочу?
Обновлено:
В реальном случае я не знаю HTML-код. Единственное, что я знаю: «Мне нужно выбрать самый первый .elem на странице с помощью CSS».
@Roy То же поведение, что и в примере, который я написал
Ответы 4
Используйте тот же селектор для элемента .wrapper. Или вы можете использовать родителя элемента-оболочки и использовать селектор :first-child.
Также обратите внимание, что nth-of-type будет работать только в том случае, если теги совпадают, а не для классов, как упоминается в других ответах. Если вы всегда хотите выбрать первый элемент внутри первого элемента, тогда body > :first-child > :first-child будет работать для вас.
body > :first-child > :first-child {
font-size: 24px;
}
.wrapper:nth-of-type(1) .elem:nth-of-type(1) {
background-color: yellow;
}
.outer-wrapper>.wrapper2:first-child > .elem:first-child {
background-color: yellow;
}<div class = "wrapper">
<div class = "elem">elem that I'd like to select</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
</div>
<div class = "wrapper">
<div class = "elem">Unfortunately, this elem is selected too</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
</div>
<section class = "outer-wrapper">
<div class = "wrapper2">
<p class = "elem">Can be selected if you knowonly the class name</p>
<p class = "elem">elem</p>
<p class = "elem">elem</p>
<p class = "elem">elem</p>
<p class = "elem">elem</p>
<p class = "elem">elem</p>
</div>
<div class = "wrapper2">
<p class = "elem">Dont worry this wont be affected</p>
<p class = "elem">elem</p>
<p class = "elem">elem</p>
<p class = "elem">elem</p>
<p class = "elem">elem</p>
</div>
</section>Это работает с этим очень простым примером, но реальный случай заключается в том, что я не знаю HTML-код. Я просто хочу самый первый .elem на странице.
Добавил еще один пример. Если у вас есть класс, вы можете выбрать этот элемент. Вам не нужен тип элемента в этом.
Добавлен еще один пример, если вы всегда хотите выбирать первый элемент. Если вы хотите использовать любой другой элемент, используйте n-й ребенок
.wrapper:first-child .elem:nth-of-type(1) {
background-color: yellow;
}<div class = "wrapper">
<div class = "elem">elem that I'd like to select</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
</div>
<div class = "wrapper">
<div class = "elem">Unfortunately, this elem is selected too</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
</div>выберите с помощью div выберите первый div с классом-оболочкой, используя псевдо: первый дочерний элемент
Только что увидел вашу правку. В этом случае вариант, который будет работать:
.wrapper:first-child .elem:first-child {
background-color: red;
}
Решение уже предоставлено выше @Mohammed
Вы можете взглянуть на мое упоминание «EDIT» в конце поста :)
Проблема с nth-of-type, first-child, last-child и так далее в том, что отсчет всегда начинается с родителя.
Итак, в вашем примере у вас есть два родительских (.wrapper) класса.
Таким образом, без специального селектора, такого как .wrapper:first-child .elem:first-child, вы не сможете выбрать его универсально.
Вам нужно знать макет страницы, если вы хотите использовать чистый css, чтобы вы могли встроить пути, чтобы выбрать только первый элемент на вашей странице.
Я провел несколько экспериментов с *:first-child > .elem:first-child { border:5px solid red } и body > *:nth-of-type(1) .elem:nth-of-type(1), и они выглядели многообещающе, но у всех есть оговорки. где вам все еще нужно знать макет страницы. Двойные вложенные элементы, несколько слоев вложенных элементов рядом друг с другом могут быть допустимы для css, поэтому я отбросил эти параметры и вернул этот ответ к моему начальному. Самая безопасная ставка — одна строка JavaScript.
Теперь решения, которые вы могли бы реализовать, двояки:
Если вы используете что-то вроде php или node-js для создания своей страницы, вы можете использовать одноразовый переключатель при рендеринге страницы.
$first = true;
foreach($listitem as $item) {
$output[] = '<div class = "elem';
if ($first) {
$first = false;
$output[] = ' first';
}
$output[] = '>elem</div>';
}
}
Если вам разрешено использовать одну строку JavaScript, вы можете использовать что-то вроде этого:
document.querySelector('.elem').classList.add('ello');
Но с чистым CSS и без использования очень определенного пути на странице, где появляется первый класс elem, это становится почти невозможным.
document.querySelector('.elem').classList.add('first');.elem.first {
background-color: yellow;
}<div class = "wrapper">
<div class = "elem">elem that I'd like to select</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
</div>
<div class = "wrapper">
<div class = "elem">Unfortunately, this elem is selected too</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
<div class = "elem">elem</div>
</div>
.elem:first-child?