Полезные CSS селекторы
Селекторы CSS — это набор правил, которые позволят нам стилизовать любой элемент HTML. В CSS есть много различных селекторов, рассмотрим парочку.
Глобальный или универсальный селектор
Действие этого селектора состоит в том, чтобы выбрать все элементы, которые будут содержаться на странице.
* { margin : 0; }
Универсальный селектор отмечен звездочкой (*). Несмотря на свою простоту, он не используется, поскольку трудно применить один и тот же стиль ко всем элементам страницы. Но обычно он сочетается с другими селекторами.
Тип элемента или селектор метки
Этот селектор принимает все элементы страницы, чей HTML-тег соответствует значению селектора. В следующем примере выбираются все <h2> страницы:
h2 {
...
}
Чтобы использовать этот селектор, нужно только ввести имя тега HTML (без символов « < > »), соответствующие выбранным элементам.
В следующем примере применяются разные стили к заголовкам HTML-страницы:
h2 {
font-size: 32px;
}
h3 {
color: coral ;
}
h4 {
color: black;
opacity : 0.
8;
}
Если вы хотите применить одинаковые стили к двум разным элементам, вы можете связать селекторы. В этом случае CSS позволяет группировать все отдельные правила в одно правило с множеством селекторов. Для этого включаются все селекторы, разделенные запятой (,), и в результате следующее правило CSS соответствует трем предыдущим правилам:
h3, h4, h5 {
color: balck ;
font-weight: Bold ;
opacity: 0.7;
font-family: Arial, Helvetica, sans-serif;
}
В сложных таблицах стилей обычно группируют свойства нескольких элементов в одно правило CSS, а затем определяют конкретные свойства этих элементов. В следующем примере сначала устанавливаются общие свойства заголовков разделов (цвет и шрифт), а затем устанавливается размер шрифта для каждого из них:
h3 {font -size: 25px ; }
h4 {font -size: 20px ; }
h5 { font -size : 15px ; }
Нисходящий селектор
Выбирает элементы, что находятся в других элементах.
Элемент происходит от другого, когда он находится между открывающей и закрывающей метками другого элемента.
Селектор в следующем примере выбирает все элементы <span> страницы, которые находятся внутри элемента <nav>:
<nav>
<span> txt1 </span>
<a href ="...">
<span> txt2 </span>
</ a >
</nav>
Селектор диапазона навигации выбирает txt2. Причина в том, что в нисходящем селекторе один элемент не обязательно должен быть прямым потомком другого. Единственное условие — элемент должен находиться внутри другого элемента, независимо от уровня глубины, в котором он находится.
Остальные элементы <span> страницы, которые не входят в элемент <nav>, не применяют вышеуказанное правило CSS.
Селекторы по убыванию позволяют повысить точность селектора типа или метки. Таким образом, используя нисходящий селектор, можно применять разные стили к элементам одного типа.
Следующий пример расширяет предыдущий образец цвета и акцентирует весь текст <a>, содержащийся в <span>:
span a {color : black ; text-decoration: none; }
С вышеуказанными правилами CSS:
- Элементы < a > найденный внутри элемента <span> показан черным цветом и выделен.
- Остальные элементы < a > страницы отображаются с цветом по умолчанию, примененным браузером.
- Нисходящие селекторы всегда образованы двумя или более селекторами, отделенными друг от друга пробелами.
- Последний селектор указывает элемент, к которому применяются стили, а предыдущий селектор указывает место, где находится элемент.
Выбор класса
Рассматрим следующий пример HTML-кода:
<body>
<h2> Lorem ipsum pain </h2>
<h2> Lorem ipsum pain </h2>
<h2> Lorem ipsum pain </h2>
</body>
Как стили CSS могут применяться только к первому h2? Универсальный селектор (*) не может быть использован, потому что он выбирает все элементы страницы.
Селектор типа элемента или метки (h2) также нельзя использовать, потому что он будет выбирать все абзацы. Наконец, нельзя использовать и нисходящий селектор (body h2), потому что все абзацы находятся в одном месте.
Одним из самых простых решений для применения стилей к одному элементу является «атрибут класса»:
<body>
<h2 class = ”title 1” > Lorem ipsum pain <h2>
<h2> Lorem ipsum pain </h2>
<h2> Lorem ipsum pain </h2>
</ body >
Затем в файле CSS создается новое правило под названием «title1» со всеми стилями, применяемыми к элементу. Чтобы браузер не путал этот селектор с другими типами селекторов, значение установлено с точкой (.) Как показано в следующем примере:
. title 1 { text-transform : uppercase ; }
Селектор . title 1 интерпретируется как «любой элемент страницы, атрибут класса которого равен title1», так что только первый заголовок подходит этому условию.
Эти типы селекторов называются селекторами классов и наиболее часто используются вместе с селекторами идентификаторов, которые будут показаны ниже.
Селекторы ID
Иногда необходимо применить стили CSS к одному элементу страницы. Хотя селектор класса может использоваться для применения стилей к одному элементу, в этом случае есть еще один более эффективный селектор.
Селектор идентификаторов позволяет вам выбрать элемент страницы через значение его атрибута id. Этот тип селекторов выбирает только один элемент страницы, поскольку значение атрибута id не может повторяться в двух разных элементах одной и той же страницы.
Синтаксис идентификаторов селекторов очень похож на синтаксис селекторов классов, за исключением того, что символ ( # ) используется вместо точки (.) в качестве префикса имени правила CSS:
# main-title {text-transform: uppercase; }
<body>
<h2 id = " main -title " > Lorem ipsum pain <h2>
<h2> Lorem ipsum pain </h2>
<h2> Lorem ipsum pain </h2>
</body>
В предыдущем примере # селектор основного заголовка выбирает только первый
<h2> (whose id attribute is equal to “ main-title ” ).
Основное различие между этим типом селектора и селектором класса связано с HTML, а не с CSS. Как известно, на одной и той же странице значение атрибута id должно быть уникальным, чтобы два разных элемента не могли иметь одинаковое значение. Но атрибут класса не обязательно должен быть уникальным, поэтому многие различные элементы HTML могут иметь одинаковое значение для своего атрибута класса.
Таким образом, общая рекомендация состоит в том, чтобы использовать селектор идентификаторов, когда вы хотите применить стиль к одному конкретному элементу страницы, и использовать селектор классов, когда вы хотите применить стиль к нескольким различным элементам HTML-страницы.
CSS-селекторы для начинающих
CSS
Окей, скажут некоторые мои подписчики и отпишутся от обновлений. Конечно, я понимаю, что во-первых статья для совсем начинающих, во-вторых, довольно много информации есть по этой теме… но тем не менее у многих людей, которые ко мне обращаются, возникают с этим проблемы.
А я даже и не знаю, на какую статью им ссылку дать, смотрю одно руководство, смотрю второе, и что-то ни одно из них мне не нравится.
Сейчас я постараюсь пролить немного света на эту тему. Однако скажу, что тут всё очень просто на самом деле — главное не стоит сразу же начинать разбираться с nth-child(even). Чтобы делать хорошую верстку, достаточно понять, как работают ID, классы и иерархия элементов.
Предлагаю вам на каждый из последующих примеров создать HTML-файл и пробовать все варианты сразу же по ходу дела. Тогда точно всё будет просто и понятно.
Пример 1. Селекторы по ID элемента
Ну это на мой взгляд самое простое и с этого нужно начинать, тут самое важное, что нужно помнить — это что какой-либо конкретный ID может встречаться только один раз на странице, ну и конечно же для вашего удобства будет лучше, если на других страницах сайта этот же ID не будет обозначать абсолютно другой элемент.
<em>Текст курсивом.</em> <strong>Жирный текст.</strong>
</strong>HTML5-спецификация допускает использование в качестве названия атрибута ID довольно большой набор символов, но я ограничиваюсь буквами латинского алфавита + символ подчеркивания _ + цифры, мне этого хватает.
/* чтобы обратиться к элементу с конкретным ID через CSS, добавим перед ним # */
#misha_em{
color:#888; /* серый цвет для курсива */
}
#misha_strong{
color:#fe0000; /* красный для жирного текста */
}Как обратиться к нескольким элементам одновременно
Очень просто — перечислить их через запятую:
#misha_em, #misha_strong{
text-tansform: uppercase; /* конечно мы недостаточно выделили наш текст, пусть еще будет в верхнем регистре */
}Подытожу: как видите с ID всё предельно просто — добавляем соответствующий атрибут к любому HTML-элементу, этот атрибут должен быть уникальным и не повторяться больше на странице, а затем мы просто обращаемся к нему напрямую через CSS. Всё.
Пример 2. Селекторы по классам
Первое отличие классов от ID — это то, что их может быть на странице сколько угодно.
Например для того, чтобы не перечислять все ID элементов через запятую, как в предыдущем примере, используем классы.
<em>Текст курсивом.</em> <strong>Жирный текст.</strong>
Переделаем предыдущий пример и получим:
/* чтобы обратиться к элементам класса, добавим перед ним точку */
.misha_text{
text-tansform: uppercase; /* оба элемента <em> и <strong> будут переведены в верхний регистр */
} Также мы можем обратиться ко всем элементам жирного текста <strong> с классом .misha_text, добавив перед точкой название тега элемента:
/* обращаемся ко всем <strong> класса misha_text */
strong.misha_text{
color:#fe0000;
}Очень кратко про приоритеты
Обычно если одному и тому же элементу присваиваются разные стили несколько раз, то задействуются те, которые указаны в CSS-файле в последнюю очередь (на самом деле тут полно правил, это однозначно тема отдельного поста). Однако у разных селекторов различный приоритет, и в примере я покажу, что имею ввиду.
Тут может показаться, что элементу должен быть присвоен цвет #fe0000, так как это значение свойства указано в последнюю очередь, однако всё совсем не так.
.misha_text{
color:#fff !important; /* если после значения свойства указать !important - это самый высочайший приоритет */
}
#misha_strong {
color:#eee; /* у ID приоритет выше, чем у классов, это правило будет считаться важнее, чем .misha_text */
}
.misha_text{
color:#fe0000;
}Подытожу: если абсолютно разным элементам нужно присвоить одинаковые стили, вы можете объединить их по классу.
Пример 3. Селекторы по HTML тегам. «Путешествие» по дереву DOM
Дерево — это иерархия всех HTML-тегов на странице.
Я предположу, что вы уже знаете парочку HTML-тегов, например то, что <div> — это просто блок, <ul> и <li> — элементы списка, <strong> — жирный текст, <p> — абзац.
<div> <ul> <li>Элемент списка 1</li> <li>Элемент списка 2</li> <li><strong>Жирный</strong> элемент списка 3</li> </ul> </div> <p><strong>Жирный текст внутри абзаца</strong></p>
К каждому из типов этих элементов можно обратиться по CSS, например:
div{
background-color:#eee; /* ко всем div (а он у нас один в примере) будет применен светло-серый фон */
}
li{
color:green; /* текст элементов списка станет зелёного о_О цвета */
}
strong{
background-color:#ff0000; /* фон всех элементов strong станет красного цвета */
}Думаю тут пока понятно, пишем название любого HTML тега в CSS и прописанные вами правила применятся для каждого указанного тега на вашей HTML-странице.
А что если мы хотим изменить стиль только того жирного текста, который находится внутри абзаца? Или вдруг нам нужно, чтобы жирный текст внутри абзаца и внутри списка отличались по стилям?
Тут нам поможет наследственность. В CSS мы можем указать полный путь к нужному нам элементу от самого начала документа, да хоть от самого <body>! Чтобы понять, о чем я говорю, смотрите пример:
/* это означает, что стили будут применяться ко всему жирному тексту,
который находится внутри элемента <ul>, который в свою очередь находится внутри элемента <li>,
который в свою очередь находится внутри элемента <div>, и необязательно, чтобы эти элементы
шли друг за другом последовательно!!! то есть может быть и так: div p ol li ul li p strong */
div ul li strong{
background-color:#ff0000;
}
/* ситуация точно такая же, необязательно элемент <strong> должен сразу идти после элемента <p>,
это может быть и: p span strong */
p strong{
background-color:#aaa;
}В принципе всё правильно и вы можете так и оставить и перейти к следующей главе, но я пока что попробую этот пример упростить.
Для начала — зачем нам указывать полный путь к элементу, ведь достаточно и одного:
div strong{
background-color:#ff0000;
}
p strong{
background-color:#aaa;
} Ну а теперь важное правило, если приоритет впереди стоящего селектора не выше, чем последующего, то к элементам применяются правила последующих селекторов.
/* сначала для всех <strong> делаем красный фон */
strong{
background-color:#ff0000;
}
/* а потом перезаписываем правила для тех <strong>, которые находятся внутри абзацов <p> */
p strong{
background-color:#aaa;
}Вот и всё, в принципе информации из этого поста должно быть достаточно для создания верстки практически любой сложности. Тем не менее, я также выпущу вторую часть поста «Селекторы CSS для продвинутых» на следующей неделе.
Миша
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Пишите, если нужна помощь с сайтом или разработка с нуля.
CSS Предыдущие одноуровневые селекторы и как их подделать | Факундо Коррадини | Мы переехали на freeCodeCamp.org/news
Если вы когда-либо использовали одноуровневые селекторы CSS, вы знаете, что их всего два. Комбинатор родственных элементов + выбирает первое совпадение, которое идет сразу после него, а комбинатор последующих родственных элементов ~ сопоставляет все последующие совпадения.
Но нет возможности выбрать то, что было раньше. Либо родительские селекторы, либо предыдущие селекторы братьев и сестер просто не нужны.
Я знаю, что ты этого хочешь, ты знаешь, что я хочу этого, но суровая правда в том, что их не существует (и, вероятно, никогда не будет). Есть миллион сообщений о почему. Есть даже предложения, как их реализовать. Но мы застряли в однонаправленной обработке правил CSS, скорее всего, чтобы защитить нас от нашего «недостатка опыта», из-за которого мы застреваем в повторных потоках и даже в бесконечных циклах.
К счастью, как и большинство ограничений CSS, мы можем подделать .
Первое, что нужно рассмотреть, это то, почему мы хотим, чтобы предыдущие братья и сестры начали с.
На ум приходят два случая:
- Нам нужно выбрать всех братьев и сестер определенного элемента, а последующий комбинатор
~братьев и сестер выбирает только те, которые идут после. - Нам нужно выбрать только братьев и сестер, которые были до
Иногда нам нужно выбрать как предыдущего, так и следующего брата и сестры. Для этого мы можем выбрать родителя и использовать некоторые трюки вокруг него.
Например, чтобы выбрать все интервалы в следующей структуре при наведении курсора на любой из них, мы могли бы просто использовать дочерний селектор при наведении родительского элемента. Мы обязательно отключаем pointer-events от родителя и сбросить его обратно для дочерних элементов. Таким образом, любое действие, которое мы хотим выполнить, будет срабатывать только тогда, когда мы входим в дочерний элемент, а не в сам родитель.
Если вам нужно выбрать всех братьев и сестер , кроме , который находится под курсором, вы можете комбинировать предыдущий метод с селектором :не , чтобы исключить его.
Типичный вариант использования для меню:
Приведенный выше код уменьшит непрозрачность всех
Кроме того, вы можете использовать фильтры, такие как селекторы типа и n-го числа, чтобы быть более точным для братьев и сестер, на которые вы хотите повлиять.
С некоторыми стилями это должно работать так:
Обратите внимание, : Если вы собираетесь запустить подход pointer-events:none , имейте в виду, что он может испортить стекирование (может позволить вам выбирать элементы которые находятся «ниже» в порядке укладки). Это также не будет работать в IE10 и ниже, за исключением того, что вам могут понадобиться события указателя для чего-то другого. Поэтому будьте особенно осторожны при его использовании.
В этом случае мы можем изменить порядок в HTML, затем отсортировать его обратно в CSS и использовать ~ последовательный комбинатор родственных элементов или + селектор смежных одноуровневых элементов. Таким образом, мы будем выбирать следующих братьев и сестер, но это будет выглядеть так, как будто мы выбираем предыдущих.
Это можно сделать несколькими способами. Самый простой и, вероятно, самый старый — изменить направление письма нашего контейнера:
Если вашим элементам нужно отображать фактический текст, вы всегда можете повернуть его обратно:
Но это может выйти из-под контроля во многих отношениях. К счастью, современный набор инструментов CSS делает это намного проще и безопаснее. Мы можем просто использовать Flexbox для контейнера и изменить порядок с помощью flex-direction:row-reverse :
Самое лучшее в подходе Flexbox — это то, что мы не путаемся с направлением записи. Нам не нужно сбрасывать детей, и все гораздо более предсказуемо.
Семантически рейтинговую систему можно представить как простой список радиокнопок с соответствующими им метками. Это удобно, так как позволит нам использовать : проверено псевдо-селектор для изменения братьев и сестер.
Итак, давайте начнем отсюда:
Как мы обсуждали ранее, элементы располагаются в обратном порядке, чтобы можно было использовать селектор «предыдущий брат». Обратите внимание, что мы используем символ юникода «белая звезда» (U+2606) для представления пустых звезд.
Давайте отобразим их рядом, в правильном (обратном) порядке:
Теперь спрячьте сами радиокнопки, никто не хочет этого видеть:
И примените стиль к символам-звездочкам:
Единственная действительно важная строка — это position:relative . Это позволит нам абсолютно расположить псевдоэлемент заполненной звезды (U+2605) поверх него, который изначально будет скрыт.
Когда мы наводим курсор на звезду, для нее и всех предыдущих братьев и сестер должен стать виден закрашенный псевдоэлемент звезды.
То же самое для выбранного рейтинга, сопоставив все метки, которые приходят до отмеченный переключатель:
Запомнить что использование флага !important является полной противоположностью хорошей практики. Я делаю это здесь, так как нет другого способа реализовать дополнительные функции, обсуждаемые в следующем разделе, без него.
И последнее, но не менее важное: нам нужно «запомнить» текущий рейтинг на тот случай, если пользователь захочет его изменить. Например, если они выбрали пять звезд и по какой-то причине хотят изменить их на четыре, мы должны отображать звезды с 1 по 4 как заполненные, а пятую как полупрозрачную при наведении на четвертую.
Этого можно добиться, изменив непрозрачность предыдущих братьев и сестер проверенного ввода при наведении курсора на контейнер:
Вот почему нам также понадобился параметр opacity:1 !important в начальном объявлении наведения. В противном случае это последнее правило выиграло бы конкурс специфичности и применило бы ко всему полупрозрачную заливку.
И вот она у нас есть, кросс-браузерная, полнофункциональная система звездочек только на CSS с использованием селекторов «предыдущих братьев и сестер».
Как видите, только потому, что «это невозможно», не означает, что вам не следует пытаться. Программирование — это расширение границ. Поэтому всякий раз, когда вы ударяетесь о стену, просто давите немного сильнее. Или я думаю, что найти свой путь вокруг этого может быть лучшей аналогией? … в любом случае, вы понимаете, что я имею в виду. Продолжайте взламывать!
Предыдущий фрагмент является упрощенным, чтобы его было легче понять. Это , а не , что я бы рекомендовал использовать в производстве из-за многих ограничений доступности.
Чтобы сделать фрагмент более доступным, первым делом нужно скрыть радиокнопки практически любым способом, кроме display:none , чтобы сделать их доступными для фокуса. Мы также должны добавить некоторое кольцо фокусировки на весь фрагмент звезд, когда какой-либо элемент внутри находится в фокусе, с помощью псевдо-селектора :focus-inin .
Одинаковые метки «☆» не имеют смысла для программ чтения с экрана, поэтому лучше всего будет иметь внутри метки с текстом «n Stars», который будет скрыт от зрячих пользователей.
Кроме того, подход с обратным исходным кодом HTML + display:row-reverse делает рейтинг клавиатуры неудобным, поскольку он не реверсируется. Доступность Flexbox и клавиатуры — довольно запутанная тема, но наиболее близким решением для нее является добавление тега aria-flowto к каждому элементу, что, по крайней мере, устраняет проблему для некоторых комбинаций программ чтения с экрана и браузера.
Для получения более доступного фрагмента (используя альтернативный метод изменения следующих братьев и сестер, чтобы они выглядели пустыми, вместо того, чтобы пытаться оценить предыдущие), проверьте Патрика Коула, как мы обсуждали в ответах ниже.
Селектор предыдущего элемента — Блог Джима Нильсена
Очень часто где-то находится … … … … … … … Мне нравится создавать такие документы, потому что они часто создаются независимо от соображений стиля, и вы не можете подключиться к синтаксическому анализатору для настройки. В результате у вас не будет возможности сказать: «А, но я хочу оформить эту вещь в стиле На днях я имел дело с таким документом, структура которого внутренне согласовывалась с его форматом в уценке: HTML-код, полученный в результате этой уценки, выглядел следующим образом: … … … …… Конец. Сложная часть? Не имея контроля над синтаксическим анализатором, мне нужно было стилизовать каждую из ссылок «призыв к действию» определенным цветом, оставив все остальные Говоря естественным языком, я хотел: «выбрать каждый элемент Я знаю, как выбрать следующего брата элемента с И я знаю, как выбрать любой смежный родственный элемент элемента (который следует за ним) с помощью И я научился выбирать элемент, когда у него есть только один дочерний элемент с Но как выбрать предыдущего брата элемента? Что-то вроде Я нашел вопрос о «предыдущем родственном селекторе» на StackOverflow. В то время как ответ, набравший наибольшее количество голосов, в основном говорил «такой вещи не существует», несколькими ответами ниже я нашел этот драгоценный камень, в котором говорилось, что вы можете сделать это с новым селектором ( Помимо : некоторые люди говорят, что не следует называть Вот селектор, который я написал: Он работает только в браузерах, поддерживающих 
Это может привести к плоской структуре элементов, иерархия которых имеет семантическое значение — лучший вид HTML! <дел>
Название документа
Дополнительный заголовок
Третичный заголовок
…
Вернуться к второстепенному заголовку
…
Третичный заголовок
Четверный заголовок
<таблица>…
x , поэтому мне нужно обернуть части контента y и z в 
# Название документа
Абзац текста
Еще один абзац текста.
---
## Заголовок
С другим абзацем текста.
- И маркированный список
- Из предметов
- [И ссылка](#)
[Призыв к действию →](#)
---
## Другой заголовок
Еще один абзац текста [и ссылка] (#).
[Еще один призыв к действию](#)
---
Конец.
Название документа
Заголовок
…
<час>
Другой заголовок
внутри него». div + p . div ~ p . p:only-child a (даже если они являются единственным элементом в своей строке, уценка перенесет [ссылка](#) элементов в теге абзаца). p:before(hr) , который выберет все абзацы, предшествующие элементу
:has() ! :has() «родительским селектором» — хотя он позволяет вам выбирать элементы с определенным родителем — и этот конкретный случай иллюстрирует, почему: я нацелен брат или сестра, а не родитель!) p:has(+ hr) a:only-child { :has() (Safari на момент написания этой статьи ), но это было нормально для моего варианта использования (в конце концов, этот стиль является улучшением страницы — если его там нет, ничего страшного, потому что ничего не ломается, но с каждым днем вероятность того, что браузеры будут иметь 