Как в CSS выбрать первый элемент с определенным классом?
Пробовал
.homebox-row-1:first-of-type
не помогло, также пробовал nth-of-type(1) также не получилось
- Вопрос задан более трёх лет назад
- 17384 просмотра
1 комментарий
Простой 1 комментарий
Ankhena @Ankhena Куратор тега CSS
nth-of-type привязываются к типу (тегу) элемента, а не к классу.
Либо заменить нужные div на article, section и т.д. либо js
Решения вопроса 4
profesor08 @profesor08 Куратор тега CSS
.homebox-row-1 < background: red; >.homebox-row-1 ~ .homebox-row-1
Получается задаешь всем цвет, а потом для всех которые идут после первого цвет сбрасывается на другой.
Ответ написан более трёх лет назад
Нравится 6 1 комментарий
Андрей Стрелков @strelkovandreyvalerievich Автор вопроса
Спасибо, больше понравилось данное решение.
Rustam Bainazarov @SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Через CSS это сделать невозможно при однородной структуре, только безумным хаком (column-reverse + селектор тильда + обратный порядок элементов). И другие способы, привязанные к последовательности блоков — это так себе.
Ни :nth-child, ни :first-of-type так не работают (читайте хороший пост на тему).
Поэтому простейший JS вам в помощь:
Update: посмотрите комментарии, там решение на строчку кода меньше.
Ответ написан более трёх лет назад
Нравится 5 3 комментария
Вадим Кот @vadimkot Куратор тега CSS
Только уж тогда вместо querySelectorAll использовать querySelector — он то сразу выберет первый элемент
const first = document.querySelector('.grid > .grid-item.is-1'); // выбираем первый элемент с нужным классом first.classList.add('is-selected'); // добавляем к нему класс
Rustam Bainazarov @SmthTo Куратор тега CSS
Вадим Кот, точно, спасибо, ещё проще :))
Андрей Стрелков @strelkovandreyvalerievich Автор вопроса
Андрей Стрелков Дружище, вот лови решение на чистом CSS
.homebox > .homebox-row-0 + :not(.homebox-row-0)
Ребус тут следующий: первый кто идет после классов `.homebox-row-0` и не является эти классом
Ответ написан более трёх лет назад
Нравится 4 3 комментария
Андрей Стрелков @strelkovandreyvalerievich Автор вопроса
Андрей Стрелков, если данный способ подошел, можешь смело отметить как решение))
это топовый ответ на самом деле, спасибо огромное!
forspamonly2 @forspamonly2
первый матч поймать нельзя, но можно поймать все не первые.
добавил снизу в примере, любезно предоставленном SmthTo :
Ответ написан более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS
Гы-гы, там ещё вариант, о котором я писал, что можно их в разметке держать в обратном порядке (3, 2, 1), а потом через flex-flow: column/row-reverse визуально приводить в нормальный вид (1, 2, 3). Тогда можно будет выбрать нужный первый элемент (который на самом деле последний в потоке) через li ~ li.
Словом, костыли так и летят, если опираться только на CSS в этом деле :))
Ответы на вопрос 0
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- HTML
- +1 ещё
Как пофиксти проблему с амперсантом?
- 1 подписчик
- 10 часов назад
- 54 просмотра
Псевдокласс :first-child
Псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу своего родителя.
Синтаксис
Значения
XHTML 1.0 CSS2.1 IE Cr Op Sa Fx
first-child Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат примера показан на рис. 1. В данном примере псевдокласс :first-child добавляется к селектору b и устанавливает для него красный цвет текста. Хотя контейнер встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т.е. текст «Lorem ipsum». В остальных случаях содержимое контейнера отображается черным цветом. Со следующим абзацем все начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.
Рис. 1. Выделение цветом первого дочернего элемента абзаца
HTML5 CSS2.1 IE Cr Op Sa Fx
Меню uno dos tres cuatro Результат данного примера показан на рис. 2.
Рис. 2. Ссылки с линией слева
Псевдокласс :first-child
Псевдокласс :first-child задаёт стиль первого элемента в группе братских элементов (имеющих одного родителя).
В качестве примера рассмотрим следующий код HTML:
Роль цитокинов при дорсалгии
Автор: Гордон Фримен, канд. физ.-мат. наук
Содержание статьи
Почта: freemen@blackmesa.com Опубликовано:
Псевдокласс :first-child без указания селектора выберет все первые элементы внутри и установит для них красный цвет текста. Здесь первыми идут и , они и будут выбраны.
article :first-child
При добавлении селектора к :first-child сперва берётся первый элемент, затем смотрится какого он типа. Если элемент совпадает с указанным селектором, то он будет выбран. Таким образом, выбирается элемент, если он удовлетворяет двум условиям одновременно: это первый элемент и это элемент указанного типа. Здесь красным цветом будет выделен заголовок, поскольку первым идёт именно .
article h1:first-child
Если вместо h1 использовать другой селектор, то ничего выбрано не будет, поскольку не выполняется условие «первый элемент это
».
article p:first-child
Для выбора первого элемента определённого типа используйте псевдокласс :first-of-type.
Вместо :first-child допустимо использовать :nth-of-child(1).
Синтаксис
Селектор:first-child
Синтаксис
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Пример
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат примера показан на рис. 1. В данном примере псевдокласс :first-child добавляется к селектору b и устанавливает для него красный цвет текста. Хотя контейнер встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е. текст «Lorem ipsum». В остальных случаях содержимое контейнера отображается чёрным цветом. Со следующим абзацем всё начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.
Рис. 1. Выделение цветом первого дочернего элемента абзаца
Результат данного примера показан на рис. 2.
Рис. 2. Ссылки с линией слева
Спецификация
| Спецификация | Статус |
|---|---|
| Selectors Level 4 | Рабочий проект |
| Selectors Level 3 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 7 | 12 | 4 | 9.5 | 4 | 3 |
| 1 | 1 | 10 | 3.1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
- :first-child и :last-child
- :first-of-type и :last-of-type
- Псевдокласс :first-of-type
- Псевдокласс :last-child
- Псевдоклассы в CSS
Селектор следующего элемента
Общий комбинатор смежных селекторов (~) разделяет два селектора и находит второй элемент только если ему предшествует первый, и они оба имеют общего родителя. Свойства будут применены ко всем элементам, указанным в правой части, следующим за элементом, указанным в левой части.
Синтаксис
element ~ element
Пример
p ~ span color: red; >
span>Это не красный.span> p>Здесь параграф.p> code>Тут какой-то код.code> span>А здесь span.span>
Спецификации
| Specification |
|---|
| Selectors Level 4 # general-sibling-combinators |
Поддержка браузерами
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 9 окт. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.