Как обращаться к дочернему элементу в css?
Если вы укажете div p , то стиль будет применен ко всем p внутри div , независимо от степени вложенности.
div p
Просто текст
Еще текст
Опять текст
Тут что-то написано
И тут что-то написано
А если укажете div>p , то стиль будет применен, только к «прямым» дочерним элементам «первой степени вложенности», обратите внимание, тут для p , который внутри section стиль не применился, хотя он тоже внутри div , но он вложен еще в другой элемент
div>p
Просто текст
Еще текст
Опять текст
Тут что-то написано
И тут что-то написано
Как обратиться к первому элементу css
Обратиться к первому элементу внутри родителя можно с помощью псевдокласса :first-child .
Например, мы хотим поменять цвет шрифта у первого параграфа:
Параграф 1 Параграф 2 Параграф 3
div p:first-child color: red; > Цвет у первого параграфа поменяется на красный.
Комбинированные селекторы
Селекторы бывают сложнее чем просто по классу, тегу или идентификатору. Перечисляем все доступные комбинированные селекторы.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Кратко
- Группировка: .element1, .element2
- Пример
- Как пишется
- Как понять
- Пример
- Как пишется
- Как понять
- Пример
- Как пишется
- Как понять
- Пример
- Как пишется
- Как понять
- Подсказки
- Пример
- Как пишется
- Как понять
- Пример
- Как пишется
- Как понять
- Realetive советует
- Роман Баранников советует
Контрибьюторы:
Обновлено 10 октября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Иногда при написании стилей мы хотим обратиться к селектору более точно, чем просто по имени класса или тега. Для этого можно использовать различные комбинации.
Группировка: .element1 , . element2
Скопировать ссылку «Группировка: .element1, .element2» Скопировано
Пример
Скопировать ссылку «Пример» Скопировано
Если нескольким селекторам нужно задать одно и то же правило, то можно написать длинно:
h1 font-weight: bold;> h2 font-weight: bold;> h3 font-weight: bold;>h1 font-weight: bold; > h2 font-weight: bold; > h3 font-weight: bold; >А можно перечислить все селекторы через запятую и написать всего одно CSS-правило:
h1, h2, h3 font-weight: bold;>h1, h2, h3 font-weight: bold; >Как пишется
Скопировать ссылку «Как пишется» Скопировано
Селекторы просто записываются в произвольном порядке через запятую:
.selector1,code,#id,[attr="value"] color: red;>.selector1, code, #id, [attr="value"] color: red; >Если вы перечисляете селекторы через запятую, то правила будут применяться к каждой из групп:
.heading span,.block,.wrapper color: red;>.heading span, .block, .wrapper color: red; >Как понять
Скопировать ссылку «Как понять» Скопировано
В примере свойство применится для трёх типов селекторов:
- Для всех внутри класса .heading (на любом уровне вложенности);
- для всех элементов с классом .block ;
- для всех элементов с классом .wrapper .
Объединение: .class1 . class2
Скопировать ссылку «Объединение: .class1.class2» Скопировано
Пример
Скопировать ссылку «Пример» Скопировано
.selector.selector_modificator color: red;>.selector.selector_modificator color: red; >Как пишется
Скопировать ссылку «Как пишется» Скопировано
Этот приём применим только для классов и атрибутов, потому что только их может быть больше одного. Селекторы записываются слитно. Стили будут применены только к тому элементу, который содержит все перечисленные селекторы.
Как понять
Скопировать ссылку «Как понять» Скопировано
Такое «склеивание» объединяет селекторы в одно правило.
Потомки: .element1 . element2
Скопировать ссылку «Потомки: .element1 .element2» Скопировано
Пример
Скопировать ссылку «Пример» Скопировано
article h3 color: red;>article h3 color: red; >Как пишется
Скопировать ссылку «Как пишется» Скопировано
Селекторы записываются последовательно через пробел.
Как понять
Скопировать ссылку «Как понять» Скопировано
Последовательность селекторов отражает вложенность — каждый следующий селектор должен обязательно находиться на каком-то уровне вложенности в предыдущий селектор.
Непосредственно вложенные: .element1 > . element2
Скопировать ссылку «Непосредственно вложенные: .element1 .element2» Скопировано
Пример
Скопировать ссылку «Пример» Скопировано
article > h3 color: red>article > h3 color: red >Как пишется
Скопировать ссылку «Как пишется» Скопировано
Селекторы разделяются знаком > .
Как понять
Скопировать ссылку «Как понять» Скопировано
Последовательность селекторов отражает непосредственную вложенность — селектор справа от оператора должен быть прямым потомком селектора из левой части:
article > h3 color: red;>article > h3 color: red; >К h3 . article _ _ heading стили для article > h3 не применятся, т. к. прямой потомок — div . article _ _ header , а не :
Заголовок
article class="article"> div class="article__header"> h3 class="article__heading">Заголовокh3> div> article>В этом примере стили к заголовку применятся, потому что является прямым потомком :
Заголовок
article class="article"> h3 class="article__heading">Заголовокh3> article>И тут тоже всё в порядке — по-прежнему является прямым потомком , потому что располагается на ближайшем уровне вложенности, хоть и следует после div . article _ _ header :
…Заголовок
article class="article"> div class="article__header">…div> h3 class="article__heading">Заголовокh3> article>Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Такая комбинация удобна, чтобы выбрать элемент, основываясь на его точном расположении в структуре документа.
Смежные: .element1 + . element2
Скопировать ссылку «Смежные: .element1 + .element2» Скопировано
Пример
Скопировать ссылку «Пример» Скопировано
label + input color: red;>label + input color: red; >Как пишется
Скопировать ссылку «Как пишется» Скопировано
Селекторы объединяются знаком + .
Как понять
Скопировать ссылку «Как понять» Скопировано
Элемент справа от + должен следовать в HTML сразу за элементом слева от + . Проще говоря, правый элемент должен быть соседом левого элемента, чтобы смежный селектор сработал.
Код из примера применится только к такому , который стоит сразу после :
label + input color: red;>label + input color: red; >К этому не применится, т. к. перед идёт :
…
label>label> p>…p> input>При такой разметке стиль применится только к первому , но не ко второму:
label>Лейблlabel> input> input>label>Лейблlabel> div> input> div>Последующие: .element1 ~ . element2
Скопировать ссылку "Последующие: .element1 ~ .element2" Скопировано
Пример
Скопировать ссылку "Пример" Скопировано
.star:hover ~ .star color: red;>.star:hover ~ .star color: red; >Как пишется
Скопировать ссылку "Как пишется" Скопировано
Селекторы объединяются с помощью символа ~ (тильда).
Как понять
Скопировать ссылку "Как понять" Скопировано
Правило применится ко всем блокам, подходящим под правый селектор, при учёте, что они являются соседями блоков из селектора слева от ~ . При этом оба селектора должны иметь одного родителя и находиться на одном уровне вложенности. В HTML правый селектор должен идти после левого селектора.
На практике
Скопировать ссылку "На практике" Скопировано
Realetive советует
Скопировать ссылку "Realetive советует" Скопировано
�� Лучше записывать селекторы по одному на строчку — так их легче читать и редактировать:
.selector1,code,#id,[attr="value"] color: red;>.selector1, code, #id, [attr="value"] color: red; >�� Объединение увеличивает специфичность правила, поэтому это может быть удобно для переопределения свойств без !important :
Код ниже нельзя редактировать по каким-то причинам:
.class1 color: red;>.class1 color: red; >Увеличим специфичность, чтобы переопределить правило, описанное в нередактируемой части и потому имеющее больший вес:
.class1.class2 color: green;> .class1 color: red;>.class1.class2 color: green; > .class1 color: red; >В итоге текст в блоке, имеющем сразу и класс .class1 и класс .class2 , будет зелёного цвета.
�� Получается, что даже невинный пробел уже имеет значение при выборе селектора на любом уровне вложенности.
Независимо от уровня вложенности селектор article h3 «найдёт» с текстом «Очень вложенный заголовок» и любые другие , которые располагаются внутри :
Очень вложенный заголовок
Заголовок
article> div> div> div> div> div> div> div> div> div> h3>Очень вложенный заголовокh3> div> div> div> h3>Заголовокh3> div> div> div> div> div> div> article>+ Развернуть
Роман Баранников советует
Скопировать ссылку "Роман Баранников советует" Скопировано
�� С помощью смежного комбинатора удобно выбирать группу одинаковых элементов по принципу «все, кроме первого» — например, чтобы задать отступ.
li + li margin-top: 1em;>li + li margin-top: 1em; >Классический пример — вёрстка «звёздного» рейтинга. Для начала опишем структуру:
div class="rating"> button>★button> button>★button> button>★button> button>★button> button>★button> div>button border: none; background-color: transparent; font-size: 5em;> button:hover,button:focus,button:hover ~ button,button:focus ~ button color: #F498AD;>button border: none; background-color: transparent; font-size: 5em; > button:hover, button:focus, button:hover ~ button, button:focus ~ button color: #F498AD; >Но сейчас при наведении курсора будут выделяться все элементы после (то есть справа).
Чтобы это исправить, мы изменим порядок следования элементов с помощью CSS-свойства direction : rtl .
Добавим это свойство родителю звёздочек .rating :
.rating direction: rtl;> button border: none; background-color: transparent; font-size: 5em;> button:hover,button:focus,button:hover ~ button,button:focus ~ button color: #F498AD;>.rating direction: rtl; > button border: none; background-color: transparent; font-size: 5em; > button:hover, button:focus, button:hover ~ button, button:focus ~ button color: #F498AD; >Обращение к классам CSS. Как правильнее?
Суть вопроса заключается в том, что как синтаксически (в плане требований к коду и удобства) правильнее обращаться, например к классу .more_text?
Так (если ничего не путаю, то называется это вложенностью, если нет - поправьте):.more .more_text
.more_text
- Вопрос задан более трёх лет назад
- 5264 просмотра
4 комментария
Простой 4 комментария
Rustam Bainazarov @SmthTo Куратор тега CSS
Как угодно. Зависит от задачи. Изучайте специфичность. Чем меньше вложенности — тем лучше.
Виталий Першин @Get-Web Куратор тега CSS
.more .more_text
Возьмите за правило никогда так не делать, за исключением тех моментов когда без этого невозможно. Возможно вы еще не столкнулись с той болью, которую могут принести вложенные селекторы, но лучше и не сталкиваться.
Аркадий Суздальцев @arktoday Автор вопроса
Аркадий Суздальцев @arktoday Автор вопроса
Решения вопроса 2
Александр @Seasle Куратор тега CSS
Можно .more_text < . >, главное чтобы класс был уникален. Также, если имеется вложенность, то при добавлении media -запросов необходимо будет повторять полную вложенность.
Ответ написан более трёх лет назад
Комментировать
Нравится 2 КомментироватьНе смотря на то что css - это каскадная таблица стилей, этот самый каскад рекомендуется использовать по минимуму. Ознакомьтесь с методологией БЭМ или стилевыми модулями.
Почему так - например блок лого, лежит в блоке хедер. Но лого решили переместить в блок мейн. Придется менять и стили. А если обращаться к классу элемента без каскада, то стили трогать не придется
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ответы на вопрос 1
vitalyDinDin @vitalyDinDinЕсли "more_text" уникален на все сайте, то можно напрямую обращаться к нему, просто ".more_text". Если не уникален, то ".more .more_text".
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопросВойдите, чтобы написать ответ
- HTML
- +1 ещё
Как пофиксти проблему с амперсантом?
- 1 подписчик
- 14 часов назад
- 65 просмотров