Как обратиться ко всем элементам в css
Перейти к содержимому

Как обратиться ко всем элементам в css

  • автор:

Основы CSS-селекторов на примере котиков

confused-cat

Вам проще воспринимать информацию визуально? При попытке написать CSS-селектор для стилизации конкретных элементов вы так же озадачиваетесь, как и наш мохнатый друг над этим абзацем? Если всё это про вас — не расстраивайтесь, скоро мы это исправим. Если вы только начинаете изучать синтаксис CSS-селекторов, то наверняка вы испытываете трудности с запоминанием того, какой селектор за что отвечает, поэтому я написал для вас это руководство с котиками. Наслаждайтесь!

Выбираем родителей

Чтобы выбрать родительский элемент, достаточно использовать в качестве селектора класс, id или имя элемента. Добавьте после селектора блок объявлений, и этого будет достаточно! Вот пример разметки и стилей:

div >"parent"> div >"child">
div >"child">
.parent < border: 10px solid cyan; >

Вот как стили повлияют на DOM (голубым подсвечен элемент, выбранный нашим селектором):

dom-cats

Выбираем потомков

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

Прямые потомки

Знак > между селекторами говорит браузеру сперва найти элемент по первому селектору, а затем найти всех прямых потомков этого элемента, соответствующих второму селектору. В следующем примере мы выбираем только тех потомков .child , которые лежат непосредственно внутри .parent :

div >"parent"> div >"child"> div >"grand child">
div >"child"> .parent > .child < border: 10px solid cyan; >

Эти селекторы выберут следующие элементы DOM:

cats

Косвенные потомки

Селектор для выбора косвенных потомков менее специфичен, чем селектор для выбора прямых потомков. Он выберет все элементы .child , вложенные в элемент .parent , независимо от того, насколько глубоко они находятся в DOM-дереве. Чтобы получить такой селектор, нужно разделить два селектора обычным пробелом. В этом примере мы выберем все дочерние .child , вложенные в .parent :

div >"parent"> div >"child"> div >"grand child">  div >"child">  .parent .child < border: 10px solid cyan; > 

Вот как это будет работать:

cats

Выбираем соседние элементы

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

div >"parent"> div >"child"> div >"child">  div >"sibling"> div >"child">  .parent + .sibling < border: 10px solid cyan; > 

Как это будет работать на DOM:

cats

Применяем несколько селекторов

Иногда вам может потребоваться применить стили к множеству разных элементов. Как это сделать? Ответ прост: нужно записать селекторы через запятую:

div >"parent"> div >"child"> div >"child">  .parent, .child < border: 10px solid cyan; > 

Вот как это сработает на DOM:

cats

Финишируем

Для дальнейшего изучения CSS-селекторов попробуйте ресурс CSS Diner (но, к сожалению, там нет котиков). Он последовательно научит вас использовать как простые, так и сложные селекторы на примере столовых приборов и вкусной еды.

Права

Спасибо всем любителям котиков с Flickr. Все котики распространяются под Creative Commons Attribution 2.0 Generic.

Как правильно в CSS обратиться к элементам неупорядоченного списка?

Есть блок ( .block ) с неупорядоченным списком внутри. Как правильно в CSS обратиться к элементам списка этого блока: .block ul li <…>или .block li <…>? И так, и так — всё действует. Но как же правильно и почему?

Отслеживать
задан 2 окт 2017 в 16:58
229 3 3 серебряных знака 9 9 бронзовых знаков

Теоретически так .block li <…>быстрее, тк меньше селекторов браузеру надо сравнивать. Не и меньше css получается. Практически удобнее более полное дерево использовать, наглядно понятней. И точно придется использовать полное дерево, если в этом списке будут вложенные списки.

2 окт 2017 в 17:14

Есть ещё предположение, что использование .block ul li <…>может быть обусловлено необходимостью отделить правила конкретно для неупорядоченного списка от упорядоченного, если такой есть (например, .block ol li <…>), а в конструкции .block li <…>мы обращаемся ко всем li , независимо от вида списка.

2 окт 2017 в 17:17

@Artem Gorlachev, не совсем понятно про необходимость использования полного дерева, если в списке будут вложенные списки. Например, если нужно обратиться к элементам списка внутри списка, то конструкция .block li li <…>и .block ul li li <…>действуют равнозначно. Или есть какие-то нюансы?

2 окт 2017 в 17:29

css читается «изнутри», то есть сначала ищется последний элемент вложенности (в нашем случае li ), дальше ищутся родители, по этому чем меньше родителей — тем быстрее отрабатывает построение каскада. Что касается «правильности», то правильно и то и то (собственно этот вывод следует из того, что работает и так и так), в том числе более глубокая вложенность используется для переопределения стилей для отдельных элементов подмножеств каскада.

2 окт 2017 в 19:04

Если внутри списка есть ещё один список, то .block ul li и .block li подействуют на оба списка, а .block > ul > li только на один внешний (а про остальное уже рассказали выше в комментах)

2 окт 2017 в 20:37

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Правильным будет и так и так, главный вопрос: Что быстрее?

1) CSS читается справа налево, то есть в селекторе .block ul li сначала будут найдены все li на странице, дальше отсеются все li которые не вложены в ul , затем из оставшихся отсеются те которые не вложены в .block . Следовательно:

=> Чем меньше вложенность, тем быстрее

2) Разные селекторы имеют разную скорость обработки. Скорость от наибольшей к наименьшей:

=> Лучше всего использовать идентификаторы или классы (скорость разнится незначительно). В остальном надо ориентироваться на этот список

Собственно на этих принципах и строится основная идеология BEM — минимум вложенности, все стили задаются через классы.

Информация взята с хабры.

Универсальный селектор

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

Для обозначения универсального селектора применяется символ звёздочки ( * ) и в общем случае синтаксис будет следующий.

В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.

В примере 14.1 показано одно из возможных приложений универсального селектора — выбор шрифта и размера текста для всех элементов документа.

Пример 14.1. Использование универсального селектора

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Универсальный селектор   

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Заметим, что аналогичный результат можно получить, если в данном примере поменять селектор * на BODY .

Вопросы для проверки

1. Какой стиль установит красный цвет текста в абзаце?

2. Что означает следующая запись в стилях?

  1. Установить фоновый цвет для всех элементов веб-страницы.
  2. Задать цвет для всех текстовых элементов документа.
  3. Установить фоновый цвет для всех элементов внутри контейнера .
  4. Установить фоновый цвет только для тегов , вложенных в другие контейнеры.
  5. Зеленый цвет фона для всех тегов в коде.

3. К какому слову применяется стиль селектора div * em * в следующем фрагменте кода?

  1. Lorem
  2. consectetuer
  3. Ut
  4. nostrud
  5. Nisl

Ответы

2. Установить фоновый цвет для всех элементов внутри контейнера .

Комбинированные селекторы

Селекторы бывают сложнее чем просто по классу, тегу или идентификатору. Перечисляем все доступные комбинированные селекторы.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

  1. Кратко
  2. Группировка: .element1, .element2
    1. Пример
    2. Как пишется
    3. Как понять
    1. Пример
    2. Как пишется
    3. Как понять
    1. Пример
    2. Как пишется
    3. Как понять
    1. Пример
    2. Как пишется
    3. Как понять
    4. Подсказки
    1. Пример
    2. Как пишется
    3. Как понять
    1. Пример
    2. Как пишется
    3. Как понять
    1. Realetive советует
    2. Роман Баранников советует

    Контрибьюторы:

    Обновлено 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; >      

    Как понять

    Скопировать ссылку «Как понять» Скопировано

    В примере свойство применится для трёх типов селекторов:

    1. Для всех внутри класса .heading (на любом уровне вложенности);
    2. для всех элементов с классом .block ;
    3. для всех элементов с классом .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; >      

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *