Css оператор: 🤷🏽‍♀️ Page not found | MDN Web Docs

Содержание

Родственные селекторы | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
7.0+	5.0+	9.2+	3.0+	1.0+	1.0+	1.0+

Версии CSS

Описание

Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h2~p стиль будет применяться ко всем элементам <p>, располагающихся после заголовка <h2>. При этом <h2> и <p> должны иметь общего родителя, так что если <p> вставить внутрь <div>, то стили применяться уже не будут.

Здесь красный цвет текста будет установлен для всех абзацев.

h2 ~ p { color: red; }
<h2>Заголовок</h2>
<p>Абзац 1</p>
<p>Абзац 2</p>

Здесь красный цвет текста будет установлен для первого и третьего абзацев. Ко второму абзацу стиль не применяется, поскольку <h2> и <p> не имеют общего родителя.

h2 ~ p { color: red; }
<h2>Заголовок</h2>
<p>Абзац 1</p>
 <div><p>Абзац 2</p></div>
<p>Абзац 3</p>

Синтаксис

E ~ F { Описание правил стиля }

Для управления стилем родственных элементов используется символ тильды (~), он добавляется между двумя селекторами E и F. Пробелы вокруг тильды не обязательны. Стиль при такой записи применяется к элементу F в том случае, если он имеет того же родителя, что и элемент E и следует сразу после него.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE htm>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы</title>
  <style>
   img {
    display: none;
   }
   #switch:checked ~ img {
    display: block;
   }
  </style>
 </head>
 <body>
  <form>
   <input type="checkbox"> 
   <label for="switch">Показать картинки</label>
    <img src="images/thumb1.jpg" alt="">
    <img src="images/thumb2.jpg" alt="">
    <img src="images/thumb3.jpg" alt="">
  </form>
 </body>
</html>

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

Соседние селекторы | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
7.0	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Версии CSS

Описание

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

Синтаксис

E + F { Описание правил стиля }

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами E и F. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него. Рассмотрим несколько примеров.

<p>Lorem ipsum <b>dolor</b> sit amet.</p>

Тег <b> является дочерним по отношению к тегу <p>, поскольку он находится внутри этого контейнера. Соответственно <p> выступает в качестве родителя <b>.

<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>

Теги <var> и <b> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <p>, не влияет на их отношение.

<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>

Соседними здесь являются теги <b> и <i>, а также <i> и <tt>. При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Соседние селекторы</title>
  <style>
   b + i {
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
   <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>
   <p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Красный цвет текста для соседних селекторов

Браузеры

Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий (B + /* плюс */ I).

CSS «and» и «или» — CodeRoad

У меня довольно большие проблемы, потому что мне нужно анафематствовать от стилизации некоторых типов ввода. У меня было что-то вроде:

.registration_form_right input:not([type="radio")
{
 //Nah.
}

Но я тоже не хочу стилизовать флажки.

Я пытался:

.registration_form_right input:not([type="radio" && type="checkbox"])
.registration_form_right input:not([type="radio" && "checkbox"])
.registration_form_right input:not([type="radio") && .registration_form_right input:not(type="checkbox"])

Как использовать && ? И скоро мне нужно будет использовать || , и я думаю, что использование будет таким же.

Обновление:

Я до сих пор не знаю, как правильно использовать || и && . Я ничего не смог найти в документах W3.

css

css-selectors

conditional-operator

Поделиться

Источник

Misiur

09 мая 2010 в 08:42

8 ответов

Вы смешиваете и сопоставляете файлы CSS ‘and’ ASP.NET .Skin?
Это CSS для HTML элементов и SKINS для ASP элементов управления? Или это CSS весь путь, даже мысль, что это, кажется, занимает больше времени? А что имеет специфичность SKINS или CSS? Я спрашиваю, потому что создаю свое первое веб-приложение ASP.NET (используя книгу), в то же время читая другое о…
CSS поддержка портативных, iPhone AND браузеров
У меня есть следующее в моем index.xhtml style type=text/css media=screen and (min-width: 500px) @import style/index.css; /style style type=text/css media=screen and (max-width: 500px) @import style/portable.css; /style style type=text/css media=handheld @import style/handheld.css; /style Он…

162

&& работает путем объединения нескольких селекторов, таких как:

<div></div>

div.class1.class2
{
  /* foo */
}

Еще один пример:

<input type="radio" />

input[type="radio"].class1
{
  /* foo */
}

|| работает путем разделения нескольких селекторов запятыми, например:

<div></div>
<div></div>

div.class1,
div.class2
{
  /* foo */
}

Поделиться

geofflee

09 мая 2010 в 08:59

И ( && ):

.registration_form_right input:not([type="radio"]):not([type="checkbox"])

OR ( || ):

.registration_form_right input:not([type="radio"]), 
   .registration_form_right input:not([type="checkbox"])

Поделиться

kennytm

09 мая 2010 в 08:48

Чтобы выбрать свойства a AND b элемента X :

X[a][b]

Чтобы выбрать свойства a OR b элемента X :

X[a],X[b]

Поделиться

waao

20 декабря 2016 в 21:50

Псевдокласс :not не поддерживается IE. Я бы получил за что-то подобное вместо этого:

.registration_form_right input[type="text"],
.registration_form_right input[type="password"],
.registration_form_right input[type="submit"],
.registration_form_right input[type="button"] {
  ...
}

Некоторое дублирование есть, но это небольшая цена за более высокую совместимость.

Поделиться

Max Shawabkeh

09 мая 2010 в 08:52

Вы можете каким-то образом воспроизвести поведение «OR», используя & и :нет.

SomeElement.SomeClass [data-statement="things are getting more complex"]  :not(:not(A):not(B))     {
    /* things aren't so complex for A or B */
}

Поделиться

Serge Profafilecebook

27 октября 2014 в 11:46

Я думаю, вам не нравится писать больше селекторов и делить их на запятую?

.registration_form_right input:not([type="radio"]),  
.registration_form_right input:not([type="checkbox"])  
{  
}

и BTW это

not([type="radio" && type="checkbox"])

по — моему, больше похоже на «input which does not have both these types» 🙂

Поделиться

Jaroslav Záruba

09 мая 2010 в 08:46

На всякий случай, если кто-то застрянет, как я.
После того, как я прошел через пост и некоторые хиты и испытания
, это сработало для меня.

input:not([type="checkbox"])input:not([type="radio"])

Поделиться

Aurish

19 февраля 2014 в 19:09

Одно слово предостережения. Нанизывание нескольких селекторов not увеличивает специфичность результирующего селектора, что затрудняет его переопределение: вам в основном нужно будет найти селектор со всеми нотами и скопировать его в ваш новый селектор.

Селектор not(X or Y) был бы великолепен, чтобы избежать раздувания специфичности, но я думаю, что нам придется придерживаться сочетания противоположностей, как в этом ответе .

Поделиться

Andrius R.

20 февраля 2020 в 09:11

все против и AND любой против или
Мне не терпелось узнать о том, в чем разница между all and and any and or например: status1=100, status2=300, status3=400 Что лучше использовать: if status1==100 and status2 ==300 and status3 ==400: или if all([status1==100,status2==300,status3=400]): аналогично для любого условия и или: if…
css prettifier AND конденсатора
Эй у меня есть проблема которая состоит из двух частей но первая из них очевидно с чего я должен начать: Я унаследовал проект, который имеет три таблицы стилей: desktop.css, tablet.css и mobile.css — они называются так на странице: <link rel=stylesheet type=text/css href=/css/tablet.css…

Псевдокласс отрицания :not(селектор) | CSS справочник

CSS селекторы

Значение и применение

Селектор :not() или псевдокласс отрицания, позволяет выбрать элементы, или селекторы отличные от указанных.

Что нельзя использовать с псевдоклассом :not():

Использовать в одном селекторе несколько псевдоклассов :not().
Использовать с псевдоэлементами (::first-letter, ::first-line и так далее).
Нельзя использовать с селекторами потомков (например, div ul a).
Использовать в групповых селекторах (комбинации из селекторов).

Поддержка браузерами

CSS синтаксис:

:not(селектор) {
блок объявлений;
}

Версия CSS

CSS3

Пример использования

Давайте рассмотрим пример в котором по разному стилизуем изображения. Допустим у нас есть изображения фиксированного размера со следующими значениями:

img { /* выбираем все изображения */
width: 100px; /* ширина элемента в пикселях */
height: 100px; /* высота элемента в пикселях */
}

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

.photo { /* выбираем все элементы с классом photo */
border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */
}

Перед Вами стоит задача изменить стиль для всех изображений (предположим, что их сотни), но при этом у Вас ограниченное количество времени и необходимо сделать так, чтобы эти изменения затронули изображения с классом .photo. Для этого Вам необходимо создать селектор совместно с псевдоклассом отрицания:

img:not(.photo)  { /* выбираем все изображения, которые не имеют класса photo */
border: 2px dashed green; /* пунктирная граница размером 2 пикселя зеленого цвета */
}

Всё вместе и результат:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс отрицания :not()</title>
<style>
img { /* выбираем все изображения */
width: 100px; /* ширина элемента в пикселях */
height: 100px; /* высота элемента в пикселях */
}
.photo { /* выбираем все элементы с классом photo */
border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */
}
img:not(.photo)  { /* выбираем все изображения, которые не имеют класса photo */
border: 2px dashed green; /* пунктирная граница размером 2 пикселя зеленого цвета */
}
</style>
</head>
	<body>
		<img src = "nich.jpg" alt = "nich" class = "photo">
		<img src = "nich.jpg" alt = "nich" class = "photo"><br>
		<img src = "nich.jpg" alt = "nich"> 
		<img src = "nich.jpg" alt = "nich"> 
		<img src = "nich.jpg" alt = "nich">
	</body>
</html>

Как вы можете заметить на изображении ниже, мы справились с поставленной задачей и стилизовали с использованием псевдокласса отрицания :not() все изображения, отлично от изображений с классом photo:

Пример использования псевдокласса отрицания :not() в CSS.CSS селекторы

Некоторые концепции для новичков: Как работают селекторы в CSS

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

В примере, приведенном ниже, CSS будет содержаться в файле с именем style.css ссылка на который будет содержаться в HTML — документе с именем index.html. Это — два разных файла. И это — одна из важных особенностей CSS, хранение дизайна отдельно от разметки.

Вот как выглядит HTML — файл:

Index.html:

<!DOCTYPE html>
 <html lang="en"> 
 <head>  
 <title> Мы изучаем селекторы!</title> 
  <link rel="stylesheet" href="style.css">
 </head>
  <body>      
<h2>Yay</h2> 
 <body> 
</html>

А CSS — файл будет содержать лишь блок селекторов, который мы видим ниже.

CSS:

HTML:

<!-- БУДЕТ работать -->
 <div></div>  
<!-- БУДЕТ работать --> 
<aside></aside>  
<!-- НЕ БУДЕТ работать --> 
<div>НЕ ВЕРНЫЙ  ID!</div>
  <!-- НЕ БУДЕТ работать --> 
<div>Это не является ID!</div>

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

CSS:

HTML:

<!-- БУДЕТ работать -->
 <div></div> 
 <!-- БУДЕТ работать --> 
<aside></aside> 
 <!-- НЕ БУДЕТ работать -->
 <div>Точка для CSS, не для HTML</div> 
 <!-- НЕ БУДЕТ работать--> 
<div>Неверный класс</div>

Селекторы классов — наши друзья. Возможно, это самые используемые и универсальные селекторы. Отчасти потому, что они поддерживаются всеми браузерами.

Отчасти потому, что вы можете добавить несколько классов (разделяемых пробелами) для HTML-элементов. Отчасти потому, что есть некоторые JavaScript-трики, с помощью которых вы можете манипулировать классами.

CSS:

HTML:

<!-- БУДЕТ работать --> 
<h3>Привет, мама </h3>  
<main> 
  <div>      
<!-- Будет работать--> 
     <h3> Везде </h3> 
  </div>
 </main>  
<!-- НЕ будет работать--> 
<div>Неверный тег, не сработает </div>  
<!-- НЕ будет работать -->
 <h3class="yolo"> Убедитесь, что после тега есть пробел! </h3>

Наибольшая польза от селекторов тегов ощущается при изменении свойств, которые являются уникальными для HTML — элемента. К примеру, установка list-style для элемента <ul> или tab-size для элемента <pre>. А также там, где нужно сбросить стили, которые браузер применяет к определенным элементам.

Но, не стоит излишне полагаться на них. Как правило, более полезно иметь класс определяющий стиль, который можно применять к любому HTML- элементу.

CSS:

HTML:

<!-- БУДЕТ работать -->
 <div data-modal="open"></div> 
 <!-- БУДЕТ работать --> 
<aside data-modal='open'></aside>
  <!-- НЕ БУДЕТ работать --> 
<div data-modal="false"> Неверное значение </div> 
 <!-- НЕ БУДЕТ работать --> 
<div data-modal>Нет значения </div> 
 <!-- НЕ БУДЕТ работать -->
 <div data-modal-open> Неверный атрибут </div>

Вы, конечно, можете возразить, что селекторы атрибутов более полезны, чем селекторы классов, потому что могут не только выбирать по наличию атрибута, но и по его точному значению.

Что ж, резонно, но учтите, что селекторы атрибутов НЕ поддерживаются в IE6.

CSS:

HTML:

<ul>   
<li>nope</li>  
 <!-- БУДЕТ работать-->  
 <li>yep, I'm #2</li>
   <li>nope</li> 
</ul>

Есть несколько различных позиционных селекторов :nth-child. Используя простые выражения (как 3n = «каждый третий«) вы можете выбирать элементы на основе их положения в HTML-документе. Вы можете поэкспериментировать с этой идеей здесь или же использовать несколько готовых рецептов.

CSS:

HTML:

<!-- БУДУТ работать -->
 <div></div>
  <!-- БУДУТ работать -->
 <aside data-blah><!-- nothin' --></aside>
  <!-- НЕ БУДУТ работать -->
 <div> </div>
  <!-- НЕ БУДУТ работать --> 
<div>
 </div>

:empty является одним из множества псевдо-селекторов, которые вы можете узнать по двоеточию (:). Как правило, они представляют собой нечто, что вы не сможете распознать по элементу или атрибуту по — отдельности.

Стоит отметить, что они немного отличаются от псевдо-элементов, которые вы можете распознать по двойным двоеточиям (::). Они ответственны за добавление элементов на страницу.

Селекторы можно объединять:

CSS:

.module.news {    
 /* Выбирает элементы из этих классов */
 } 
#site-footer::after {   
/* Добавляет  контент после элемента с ID */ 
} 
section[data-open] {  
 /* Выбирает только элементы раздела, если у них есть этот атрибут */ 
}

Есть также комбинации селекторов, таких как ~ и + и > которые влияют на селекторы, следующим образом:

CSS:

.module > h3 {   
/* Выбирает h3 элементы, которые являются прямыми потомками элемента этого класса */ 
}  
h3 + p {  
 /* Выбирает элементы p которые следуют непосредственно за элементом h3 */
 } 
li ~ li {   
/* Выбирает элементы li которые родственны (и следуют) за другими элементами li. */
 }

РедакцияПеревод статьи «Beginner Concepts: How CSS Selectors Work»

Аксиоматический CSS и лоботомированные совы

На последнем CSS Day в июне я с некоторым трепетом представил странный
трехсимвольный CSS-селектор. Он назывался «лоботомированная сова» — из-за
его сходства с пустым взглядом взглядом этой птицы, и это оказалась самая
популярная часть моего доклада.

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

Селектор лоботомированной совы выглядит так:

* + *

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

Стилизация по умолчанию

Практически все профессиональные дизайнеры веб-интерфейсов (или разработчики,
как вам будет угодно) приучили себя по умолчанию стилизировать HTML-элементы. Мы представляем себе элемент интерфейса, а затем создаем стили для объекта, которые вручную привязываем к разметке.

Несмотря на то что он отвечает только за представление, а не за семантику,
для стилизации мы чаще всего используем селектор по классу. В то время
как элементы и большинство атрибутов предопределены и стандартизированы, классы
предоставляют нам свободу творчества. Классы дают нам контроль.

.my-module {
  
}

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

<a>Нажми меня</a>

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

Разрастание кода

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

Выбрав стилизацию, полностью полагающуюся на элементы, мы ошибочно предполагаем, что HTML-элементы существуют в вакууме, а не являются объектом наследования и не
принадлежат своему контексту. Рассматривая элемент как «штуку, для которой надо
написать стили», мы наделяем конкретный элемент избыточным значением и определяем для него стили, которые уже должны были быть определены выше в каскаде. Добавление новых модулей в проект приводит к неконтролируемому разрастанию кода.

.module-new {
  
}

Что касается препроцессоров с их одержимостью переменными и
объектно-ориентированными CSS-методологиями, переиспользуемыми объектами
классов — с их помощью мы сбрасываем балласт, чтобы остановить разрастание кода.
Это одержимость нашей индустрии. Однако большинство из них навязывают философию,
которая, в первую очередь, и порождает разрастание кода. Некоторые из них даже
навязывают плоскую структуру CSS, цитируя решение проблемы веса селекторов — сводя CSS к SS (Каскадные таблицы стилей к просто таблицам стилей. Без использования каскада. Примечание переводчика.) и отказываясь от одного из основных его достоинств.

Я не осуждаю эти подходы, но существуют и другие методы, которые могут оказаться
при определенных условиях более эффективными. А теперь пристегните ремни.

Производительность селекторов

Я допускаю, что некоторые из вас начали неодобрительно качать головами, увидев
два астериска в селекторе * + * в начале статьи. Для этого есть причина.
Универсальный селектор — это действительно мощный инструмент. И его можно
использовать не только во зло, но и во благо. Прежде чем углубиться в это, однако, я хотел бы обсудить проблему быстродействия.

Все исследования, которые мне довелось прочесть, включая исследования Стива Шодерса (Steve Souders) и Бена Фрэйна (Ben Frain), пришли к выводу, что сравнительное быстродействие CSS селекторов разных типов показывает, что разница пренебрежительно мала. Фактически Фрэйн заключает, что «заморачиваться по поводу селекторов в современных браузерах — бессмысленно». И я пока не встречал ни одного убедительного аргумента, опровергающего результаты этих исследований.

Согласно Фрэйну, наоборот, именно количество CSS-селекторов, разрастание кода, может привести к проблемам; особо он упоминает неиспользуемые, хотя и объявленные CSS-правила. Другими словами, выбирать селекторы по классу за их «скорость» бесполезно, если настоящие проблемы с производительностью вызывает их количество. Хорошо, это плюс гигантские JPEG-изображения и веб-шрифты, которые не были урезаны до необходимого подмножества символов.

Наоборот, одновременный контроль множества элементов с помощью селектора * делает код лаконичнее, помогает уменьшить размер файла и улучшить производительность.

Настоящая проблема с универсальным селектором в том, что он сам по себе не
выражает ничего, кроме «стилизуем всё подряд». Фокус в том, как использовать его для создания более сложных селекторов, учитывающих контекст.

Разбираемся с отступами

Проблема с ограничением области действия стилей до одного элемента в том, что не
все должно рассматриваться как вещь в себе. Например отступы: отступы это то,
что разделяет элементы. Само по себе применение верхнего отступа к элементу
бессмысленно, вне зависимости от того как часто или редко ты это делаешь. Это
все равно что намазать клеем одну сторону объекта до того, как ты решишь его
приклеить и определишься с тем, куда именно.

.module-new {
  margin-bottom: 3em; 
}

Что нам нужно, так это выражение (селектор), которое соответствует только элементам, которым нужен отступ. И это только те элементы, которые находятся в одном контексте с другими, соседними, элементами. Селектор соседа делает именно это: используя форму x + n, мы можем добавить верхний отступ любому элементу n, перед которым есть x.

В обычных условиях эта задача очень быстро приведет к описанию множества возможных случаев, если мы начнем создавать правила для каждой пары соседей. Вот
почему мы используем вышеупомянутый универсальный селектор, создавая мордочку
совы. Аксиома следующая: «все элементы в потоке, которые расположены после другого
элемента, должны получить верхний отступ равный интерлиньяжу».

* + * {
  margin-top: 1.5em;
}

Предрасположенность к ошибкам

Предположим, что размер кегля шрифта параграфов 1 em и интерлиньяж 1.5 em —
устанавливаем отступ в одну строку всем элементам в потоке, которые следуют
за другим элементом в любых вариациях и в любом порядке. И мы, разработчики, и
ребята, которые создают контент проекта, можем не волноваться о том, что забыли
элемент и не прописали использование стандартного отступа, когда он идет после
другого элемента. Чтобы добиться этого обычными методами, мы должны для каждого отдельного элемента определять свои отступы. Скучно, долго и всегда есть риск что-то упустить.

Вместо того чтобы писать стили, мы создали аксиому: общий принцип для
раскладки с поточным контентом. Это также очень удобно для поддержки кода:
если вы изменили высоту строки, просто сделайте таким же значение отступа сверху.

Учитываем контекст

Можно сделать еще лучше. Применяя отступ исключительно между элементами, мы не
создаем никаких лишних отступов (ненужный клей), обреченных комбинироваться с
полями родительского элемента. Сравните решение (a), которое добавляет верхний
отступ ко всем элементам с решением (б), которое использует совиный селектор.

Теперь давайте рассмотрим поведение с учетом вложенности. Как показано, при
использовании совиного селектора и margin-top, ни первый, ни последний элемент
не получают ненужные отступы. Когда вы создаете подмножество таких элементов,
оборачивая их в родительский элемент, применяется то же правило. Никаких лишних
отступов вне зависимости от уровня вложенности. Это решение с некоторой
элегантностью препятствует накоплению отступов в интерфейсе.

Это в высшей степени более лаконично и надежно, чем неаксиоматичный подход и
необходимость подчищать лишний клей постфактум, как с неохотой признал Крис
Койер (Chris Coyier) в «Отступы после модулей». Именно эта статья,
надо заметить, подсказала мне идею лоботомированной совы.

.module > *:last-child,
.module > *:last-child > *:last-child,
.module > *:last-child > *:last-child > *:last-child {
  margin: 0;
}

Обратите внимание, что все это работает только в контексте «модуля» (это была
большая просьба от редактора контента) и требует оценивать возможную степень
вложенности. В данном случае до третьего уровня вложенности.

Дизайн на основе исключений

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

Книжные параграфы с выключкой по ширине

p {
  text-align: justify;
}

p + p {
margin-top: 0;
text-indent: 2em;
}

Обратите внимание, что отступ добавлен только тем параграфам, которые следуют за другими, — это еще одно преимущество селектора по ближайшему соседу.

Компактные модули

.compact * + * {
  margin-top: 0.75em;
}

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

Виджеты с позиционированием

.margins-off > * {
  margin-top: 0;
}

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

Красота

em

Однако некоторые исключения неизбежны из-за использования единиц em для
определения размера отступа — они уже сами по себе автоматически изменяются
из-за другого свойства: @media запросов.

Когда дело касается заголовков, мы получаем некоторые преимущества. Определив кегль шрифта заголовка в em, мы сразу получаем соответствующий заголовку отступ (отступ лида), не написав ни одной дополнительной строки кода.

Строчные элементы

Предполагается, что объявленные стили должны наследоваться. Как CSS, вообще-то, и задумывался. Однако я понимаю, как раздражает многих из вас то, насколько
этот селектор «жадный». Особенно после того, как все привыкли избегать
наследования настолько, насколько это вообще возможно.

Я уже рассмотрел несколько исключений, которые вы, возможно, захотите сделать, но давайте пойдем дальше: помните, что строчные элементы со стандартным значением display: inline тоже унаследуют верхний отступ, хотя он не повлияет на их отображение. Строчные элементы учитывают только горизонтальные отступы, что является их стандартным поведением во всех браузерах.

Если вы обнаруживаете, что часто перезаписываете совиный селектор, скорее всего,
в вашем дизайне имеются глубокие системные проблемы. Совиный селектор работает
с поточным контентом, и такой тип контента должен быть основным на странице. Я бы не советовал сильно полагаться на позиционированный контент в большинстве интерфейсов, так как он нарушает неявное взаимодействие элементов в рамках потока. Даже сетки с их флоат-колонками не должны требовать чего-то большего, чем простой селектор .row > *, применяющий к ним margin-top: 0, чтобы сбросить отступ.

Заключение

Я плохой математик, но Начала Эвклида произвели на меня большое впечатление: набор тривиальных правил, или аксиом, которые формируют основу для
сложного и прекрасного предмета — геометрии. Благодаря Эвклиду я понимаю, что
даже наиболее сложные системы должны быть основаны на элементарных правилах, и это также будет верно в отношении CSS. Кроме того, разбиение на модули сложного
интерфейса — это необходимый шаг на пути его взросления, и любой интерфейс, который не следует этим базовым принципам, потеряет свою прозрачность.

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

Если вы совсем отключите CSS на странице, вы, возможно, заметите две вещи. Первая — то, что страница упорно сохраняет гибкость: контент укладывается в область просмотра независимо от ее размеров. Вторая — при условии, что вы написали соответствующую стандарту и доступную разметку, вы, наверное, увидите, что контент уже стилизован если и не особо красивым, то хотя бы приемлемым образом. Встроенные стили браузера позаботились и об этом.

Наши усилия по освоению и улучшению изначальной независмости от устройств, предоставляемой браузерами, не прекращаются. Пришла пора поработать, чтобы вернуть независимость и от контента.

CSS селектор — Русские Блоги

каталог

I. Введение

Во-вторых, грамматика

В-третьих, метод введения

Встроенный стиль

2. Встроенный

3. Внешний стиль

В-четвертых, селектор

Основной селектор

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

3. Селектор недвижимости

4. Необычные селекторы

5. Группировка и вложение

6. Псевдо-класс селектора

7. Псевдоэлемент выбора

8. Приоритет селектора

I. Введение

CSS (Cascading Style Sheet) определяет, как отображать элементы HTML.
Когда браузер читает таблицу стилей, он форматирует (отображает) документ в соответствии с этой таблицей стилей.

Преимущества: Отдельные стили контента для групповой разработки, стили можно повторно использовать для повышения эффективности разработки, точный контроль страниц для создания красивых и упрощенных сложных страниц, более удобный для поиска поисковыми системами, более заметная структура

Во-вторых, грамматика

Стили CSS состоят из двух частей:Селектор: оператор;Объявления включают атрибуты и значения атрибутов, и каждый оператор заканчивается точкой с запятой.

В-третьих, метод введения

Встроенный стиль

Встроенный стиль предназначен для установки стиля CSS в атрибуте style тега, и он вступает в силу немедленно без ссылки. Это не рекомендуется для широкомасштабного использования.

2. Встроенный

При внедрении стили CSS записываются в тег style внутри тега head веб-страницы следующим образом:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
                 / * класс перед "." * /
        .class_sign {color: red}
                 / * id сопровождается "#" * /
        #id_sign {color: green}
    </style>
</head>
<body>
<div>Hello world</div>
<div>Hello world</div>
</body>
</html>

3. Внешний стиль

Написан в отдельном файле стилей, он действителен для всех страниц всего сайта и вводится посредством ссылок. Синтаксис ссылки:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
         <! - Ввести стиль файла CSS и автоматически сопоставить теги->
    <link rel="stylesheet" href="style.css" />
</head>
<body>
<div>Hello world</div>
<div>Hello world</div>
</body>
</html>

В-четвертых, селектор

Основной селектор

Элемент выбора
Селектор идентификаторов
Выбор класса
Не начинайте имя класса с числа (некоторые браузеры не распознают его)
Если в теге есть несколько атрибутов класса, они могут быть разделены пробелами.
Универсальный селектор

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

Потомок селектор
Сын селектор
Смежный селектор
Брат селектор

3. Селектор недвижимости

4.=»cir»] {
color: red;
}
/ * Выбрать все элементы с атрибутом типа, значение которого заканчивается на * /
[type$=»are»] {
color: blue;
}
/ * Выбрать все элементы с атрибутом типа, значение которого содержит (строка содержит): * /
[type=»is»] {
color: green;
}
/ Выбрать все элементы с атрибутом класса, значение которого содержит (входит в несколько значений) tag1 * /
[class~=»tag1″] {
color: orchid;
}
</style>
</head>
<body>
<ul type = «circle disc»> <li> Я являюсь элементом с атрибутом типа, значение которого начинается с cir </ li> </ ul>
<ul type = «square»> <li> Я являюсь элементом с атрибутом типа, и его значение заканчивается на </ li> </ ul>
<ul type = «disc»> <li> Я являюсь элементом с атрибутом типа, значение которого содержит (строка содержит) </ li> </ ul>
<div class = «tag1 tag2»> <p> Я являюсь элементом с атрибутом класса, значение которого содержит (включен в несколько значений) tag1 </ p> </ div>
</body>
</html>

5. Группировка и вложение

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>CSS</title>
         <! - Выбор группы->
    <style>
                 / * (Установите теги div и span на красный) * /
        div,
        span {
            color: red;
        }
    </style>
</head>
<body>
 <div> Я тег div </ div>
 <span> Я - тег span </ span>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>CSS</title>
         <! - Вложенный селектор->
    <style>
                 / * (Установить все шрифты внутри тега p на синий) * /
        .tag p {
            color: blue;
        }
                 / * (Установить шрифт всех тегов span внутри тега на зеленый) * /
        #tag span {
            color: green;
        }
    </style>
</head>
<body>
<div>
         <p> Я тэг p </ p>
         <span> Я - тег span </ span>
</div>
</body>
</html>

6. Псевдо-класс селектора

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>CSS</title>
    <! - Селектор псевдокласса->
    <style>
                 / * Цвет невидимой ссылки * /
        a:link {
            color: #F00;
        }
                 / * Цвет посещенной ссылки * /
        a:visited {
            color: #0F0;
        }
                 / * Цвет при наведении мыши на ссылку * /
        a:hover {
            color: #F0F;
        }
                 / * Цвет при щелчке мышью по ссылке * /
        a:active {
            color: #00F;
        }
                 / * стиль ввода, когда поле ввода получает фокус * /
        input:focus {
            outline: none;
            background-color: #EEE;
            color: #00F;
        }
                 / * (Псевдо-селектор также может быть применен к большему количеству тегов, таких как теги выбора) * /
    </style>
</head>
<body>
<div>
    <a href="https://blog.csdn.net/qq_41964425" target="_blank">CSDN</a>
         <a href="http://css.doyoe.com" target="_blank"> Справочное руководство по CSS </a>
</div>
<div>
         <label> <input type = "text" placeholder = "Я поле ввода"> </ label>
</div>
</body>
</html>

7. Псевдоэлемент выбора

first-letter
before
after

До и после в основном используются для очистки поплавка.

8. Приоритет селектора

#. Наследование CSS:

Наследование является основной особенностью CSS и зависит от отношений предка и потомка.
Наследование — это механизм, который позволяет применять стили не только к конкретному элементу, но и к его потомкам.
(например, значение цвета шрифта, определенное тегом body, также применяется ко всем тегам внутри тега body)
Вес наследования CSS очень низок, и его приоритет равен 0, что ниже, чем приоритет обычных элементов.
(то есть вы можете переопределить стиль, определенный вашими предками, если вы установите стили для своих потомков)
Наследование является важной частью CSS. Нам даже не нужно думать, почему он может это делать, но наследование CSS также ограничено.
(такие как border, margin, padding, bacckground и т. д. не могут быть унаследованы)

#. Приоритет селектора:

Выше объясняется много видов селекторов, то есть может быть много способов найти и стилизовать элемент на странице HTML, так что браузер решает, какой стиль применить?

Фактически он определяется в соответствии с весами различных селекторов. Метод расчета веса конкретного селектора следующий:

Кроме того, вы можете заставить стиль вступить в силу, добавив метод! Important, но это не рекомендуется, поскольку чрезмерное использование может испортить файл стиля и затруднить его поддержку.

Если это абсолютно необходимо, не используйте:

Держись, ты выиграл

Жизнь всегда плоха, ключ к кипению

Кипение это накопление энергии

Кипение это сублимация жизни

Кипение это болезненный и терпеливый процесс

Не могу выделиться

Что означает селектор CSS «+» (знак плюса)?

Селектор знака «+» используется для выбора элементов, которые помещаются сразу после указанного элемента, но не внутри отдельных элементов.

Примечание: IE8 и более ранние версии должны быть объявлены как рабочий элемент + селектор элемента.

Вниманию читателя! Не прекращайте учиться сейчас. Освойте все важные концепции HTML с помощью Web Design for Beginners | Курс HTML .

Синтаксис:

element + element {
    // свойство CSS
}

Пример:

< html >

< голова >

title > + знак выбора title >

< style >

h3 + div {

font-size: 20px ;

font-weight: жирный;

дисплей: встроенный;

цвет фона: желтый;

цвет: зеленый;

}

h2 {

цвет: зеленый;

}

body {

выравнивание текста: по центру;

}

стиль >

головка >

< корпус > 9000

< h2 > GeeksforGeeks h2 >

< h3 > Селектор знака + h3 >

< div > Портал информатики для вундеркиндов div >

body >

html >

Выход:

Поддерживаемые браузеры: Браузеры, поддерживаемые селектором «+», перечислены ниже:

Apple Safari
Google Chrome
Firefox
Opera
Internet Explorer 7.0

Селектор CSS - javatpoint

Селекторы CSS используются для выбора содержимого, которое вы хотите стилизовать . Селекторы являются частью набора правил CSS. Селекторы CSS выбирают элементы HTML в соответствии с их идентификатором, классом, типом, атрибутом и т. Д.

В CSS есть несколько различных типов селекторов.

Селектор элементов CSS
Селектор идентификатора CSS
Селектор классов CSS
Универсальный селектор CSS
Селектор групп CSS

1) Селектор элементов CSS

Селектор элемента выбирает элемент HTML по имени.

<стиль>
п{
выравнивание текста: центр;
цвет синий;
}

Этот стиль будет применяться к каждому абзацу.

Я тоже!

И я!

Проверить это сейчас

Выход:

Этот стиль будет применен к каждому абзацу.

Я тоже!

И я!

2) Селектор идентификатора CSS

Селектор id выбирает атрибут id элемента HTML, чтобы выбрать конкретный элемент.Идентификатор всегда уникален на странице, поэтому он выбирается для выбора одного уникального элемента.

Записывается с символом решетки (#), за которым следует идентификатор элемента.

Рассмотрим пример с идентификатором para1.

<стиль>
# para1 {
выравнивание текста: центр;
цвет синий;
}

Здравствуйте, Javatpoint.com

Этот абзац не будет изменен.

Проверить это сейчас

Выход:

Здравствуйте, Javatpoint.com

Этот абзац не будет изменен.

3) Селектор классов CSS

Селектор класса выбирает элементы HTML с определенным атрибутом класса. Используется с точкой. (символ точки), за которым следует имя класса.

Примечание. Имя класса не должно начинаться с числа.

Рассмотрим пример с классом «центр».

<стиль>
.center {
выравнивание текста: центр;
цвет синий;
}

Этот заголовок выделен синим цветом и выровнен по центру.

Этот абзац синий и выровнен по центру.

Проверить это сейчас

Выход:

Этот заголовок выделен синим цветом и выровнен по центру.

Этот абзац синий и выровнен по центру.

Селектор классов CSS для определенного элемента

Если вы хотите указать, что только один конкретный элемент HTML должен быть затронут, вы должны использовать имя элемента с селектором класса.

Давайте посмотрим на примере.

<стиль>
п.center {
выравнивание текста: центр;
цвет синий;
}

Этот заголовок не изменяется

Этот абзац синий и выровнен по центру.

Проверить это сейчас

Выход:

На данную товарную позицию не влияет

Этот абзац синий и выровнен по центру.

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

Универсальный селектор используется как подстановочный знак. Он выбирает все элементы на страницах.

<стиль>
* {
цвет: зеленый;
размер шрифта: 20 пикселей;
}

Это заголовок

Этот стиль будет применяться к каждому абзацу.

Я тоже!

И я!

Проверить это сейчас

Выход:

Это товарная позиция

Этот стиль будет применен к каждому абзацу.

Я тоже!

И я!

5) Селектор групп CSS

Селектор группировки используется для выбора всех элементов с одинаковыми определениями стиля.

Селектор группировки используется для минимизации кода. Запятые используются для разделения каждого селектора в группе.

Давайте посмотрим код CSS без селектора групп.

h2 {
выравнивание текста: центр;
цвет синий;
}
h3 {
выравнивание текста: центр;
цвет синий;
}
п {
выравнивание текста: центр;
цвет синий;
}

Как видите, вам нужно определить свойства CSS для всех элементов. Его можно сгруппировать следующим образом:

h2, h3, p {
выравнивание текста: центр;
цвет синий;
}

Давайте посмотрим полный пример селектора групп CSS.

<стиль>
h2, h3, p {
выравнивание текста: центр;
цвет синий;
}

Здравствуйте, Javatpoint.com

Здравствуйте, Javatpoint.com (более мелким шрифтом)

Это абзац.

Проверить это сейчас

Выход:

Привет Javatpoint.com

Hello Javatpoint.com (более мелким шрифтом)

Это абзац.

Полное руководство для повышения уровня ваших навыков работы с селектором CSS

Примечание редактора: Этот пост был обновлен в июле 2021 года, чтобы отразить последнюю информацию о селекторах CSS, включая обновление уровня 4 модуля псевдоэлементов CSS за май 2021 года.

Я использую CSS уже много лет, но до недавнего времени я не особо возвращался к теме селекторов CSS.

Зачем мне это нужно? Мы все уже знаем селекторы наизнанку, верно?

Проблема в том, что (по крайней мере, в моем случае) со временем легко привыкнуть к использованию одного и того же надежного набора селекторов в каждом проекте для достижения того, что вам нужно.

Итак, я взял на себя обязательство предоставить подробный обзор селекторов CSS и натолкнулся на некоторые интересные, которые были для меня новыми, использовались так, как мне раньше не приходило в голову, или будут доступны в ближайшее время.

Последние селекторы CSS, указанные W3C, содержатся в документе Selectors Level 4, который последний раз обновлялся в конце 2018 года. Большинство этих селекторов сейчас есть во всех основных браузерах, но некоторые из них, например : has () , еще не рассмотрены. Существует отдельная спецификация для псевдоэлементов, последней из которых является модуль псевдоэлементов CSS уровня 4, который был обновлен снова в мае 2021 года.Так что скоро их будет больше!

Я приглашаю вас присоединиться ко мне, поскольку я рассмотрю различные типы селекторов CSS. Сколько из них вы уже используете в своей повседневной работе? Мне было бы интересно узнать.

Готовы повысить свои навыки работы с селектором CSS? Ладно, пошли.

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

Начнем со знакомой территории. Селекторы комбинатора используются для выбора дочерних элементов, а также братьев и сестер, и существуют уже довольно давно.

Общий дочерний селектор (пробел), например, A B
Прямой дочерний селектор, например, A> B
Селектор соседнего родственника, например, A + B
Общий родственный селектор, например, A ~ B

Соседний переключатель A + B должен быть вам знаком. Он выбирает элемент B , который следует сразу за A . Но как насчет общего селектора родственников A ~ B ? Это выбирает все элементы-родственники B , следующие за A .

Вот их пример в действии:

См. Селекторы комбинатора Pen
Дэвида Гвайера (@dgwyer)
на CodePen.

Строка Нью-Йорк выбрана, потому что она следует сразу за первой строкой, а последние два города выделены, так как общий селектор братьев и сестер соответствует всем городам после четвертого.

Селекторы CSS атрибутов

Мне очень нравятся селекторы атрибутов. Они настолько гибки, когда вам нужно сопоставить элементы, содержащие атрибуты, с определенными значениями.

См. Pen
Attribute Selectors # 1 Дэвида Гвайера (@dgwyer)
на CodePen.

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

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

Селекторы атрибутов

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

 кнопка [значок]

Соответствует элементам

[css / selectors / -ms-scrollbar-shadow-color] (/ css / selectors / -ms-scrollbar-shadow-color)	[css / selectors / ID] (/ css / selectors / ID)	[css / selectors / Namespaced] (/ css / selectors / Namespaced)
[css / selectors / Type] (/ css / selectors / Type)	[css / selectors / Universal] (/ css / selectors / Universal)	[css / selectors / attribute selector] (/ css / selectors / attribute_selector)
[CSS / селекторы / атрибуты / равенство] (/ CSS / селекторы / атрибуты / равенство)	[css / селекторы / атрибуты / существование] (/ css / селекторы / атрибуты / существование)	[css / селекторы / атрибуты / дефис] (/ css / селекторы / атрибуты / дефис)
[css / селекторы / атрибуты / префикс] (/ css / селекторы / атрибуты / префикс)	[css / селекторы / атрибуты / подстрока] (/ css / селекторы / атрибуты / подстрока)	[css / селекторы / атрибуты / суффикс] (/ css / селекторы / атрибуты / суффикс)
[css / селекторы / атрибуты / пробел] (/ css / селекторы / атрибуты / пробел)	[css / selectors / border-image] (/ css / selectors / border-image)	[CSS / селекторы / класс] (/ CSS / селекторы / класс)
[css / selectors / селектор классов] (/ css / selectors / class_selector)	[css / селекторы / комбинаторы / смежный брат] (/ css / селекторы / комбинаторы / смежный_сиблинг)	[CSS / селекторы / комбинаторы / дочерний элемент] (/ CSS / селекторы / комбинаторы / дочерний элемент)
[CSS / селекторы / комбинаторы / потомок] (/ CSS / селекторы / комбинаторы / потомок)	[css / селекторы / комбинаторы / общие родственники] (/ css / selectors / комбинаторы / general_sibling)	[css / selectors / cursor] (/ css / selectors / cursor)
[css / selectors / id selector] (/ css / selectors / id_selector)	[css / selectors / outline] (/ css / selectors / outline)	[CSS / селекторы / цвет контура] (/ css / селекторы / цвет контура)
[CSS / селекторы / стиль контура] (/ css / селекторы / стиль контура)	[CSS / селекторы / ширина контура] (/ CSS / селекторы / ширина контура)	[css / selectors / псевдоклассы] (/ css / selectors / псевдоклассы)
[css / selectors / псевдоклассы /: - ms-input-placeholder] (/ css / selectors / псевдоклассы /: - ms-input-placeholder)	[css / selectors / псевдоклассы /: active] (/ css / selectors / псевдоклассы /: active)	[css / selectors / псевдоклассы /: проверено] (/ css / selectors / псевдоклассы /: проверено)
[css / selectors / псевдоклассы /: отключено] (/ css / selectors / псевдоклассы /: отключено)	[css / selectors / псевдоклассы /: пусто] (/ css / selectors / псевдоклассы /: пусто)	[css / selectors / псевдоклассы /: включено] (/ css / selectors / псевдоклассы /: включено)
[css / selectors / псевдоклассы /: первый ребенок] (/ css / selectors / псевдоклассы /: первый ребенок)	[css / selectors / pseudo-classes /: first-of-type] (/ css / selectors / pseudo-classes /: first-of-type)	[css / selectors / псевдоклассы /: focus] (/ css / selectors / псевдоклассы /: focus)
[css / selectors / псевдоклассы /: hover] (/ css / selectors / псевдоклассы /: hover)	[css / selectors / псевдоклассы /: в диапазоне] (/ css / selectors / псевдоклассы /: в диапазоне)	[css / selectors / псевдоклассы /: неопределенный] (/ css / selectors / псевдоклассы /: неопределенный)
[css / selectors / псевдоклассы /: недопустимые] (/ css / selectors / псевдоклассы /: недопустимые)	[css / selectors / псевдоклассы /: lang (c)] (/ css / selectors / псевдоклассы /: lang (c))	[css / selectors / pseudo-classes /: last-child] (/ css / selectors / псевдоклассы /: last-child)
[css / selectors / pseudo-classes /: last-of-type] (/ css / selectors / pseudo-classes /: last-of-type)	[css / selectors / псевдоклассы /: ссылка] (/ css / selectors / псевдоклассы /: ссылка)	[css / selectors / псевдоклассы /: не] (/ css / selectors / псевдоклассы /: нет)
[css / селекторы / псевдоклассы /: nth-child (n)] (/ css / selectors / псевдоклассы /: nth-child (n))	[css / selectors / псевдоклассы /: nth-last-child (n)] (/ css / selectors / псевдоклассы /: nth-last-child (n))	[css / selectors / псевдоклассы /: nth-last-of-type (n)] (/ css / selectors / псевдоклассы /: nth-last-of-type (n))
[css / selectors / псевдоклассы /: nth-of-type (n)] (/ css / selectors / псевдоклассы /: nth-of-type (n))	[css / selectors / псевдоклассы /: only-child] (/ css / selectors / псевдоклассы /: only-child)	[css / selectors / pseudo-classes /: only-of-type] (/ css / selectors / pseudo-classes /: only-of-type)
[css / selectors / псевдоклассы /: необязательно] (/ css / selectors / псевдоклассы /: необязательно)	[css / selectors / псевдоклассы /: требуется] (/ css / selectors / псевдоклассы /: требуется)	[css / selectors / псевдоклассы /: root] (/ css / selectors / псевдоклассы /: root)
[css / selectors / псевдоклассы /: target] (/ css / selectors / псевдоклассы /: target)	[css / selectors / псевдоклассы /: допустимые] (/ css / selectors / псевдоклассы /: допустимые)	[css / selectors / псевдоклассы /: посещены] (/ css / selectors / псевдоклассы /: посещены)
[css / selectors / псевдоклассы / Динамические псевдоклассы] (/ css / selectors / псевдоклассы / Dynamic_pseudo-классы)	[css / selectors / псевдоклассы / Структурные псевдоклассы] (/ css / selectors / псевдоклассы / Structural_pseudo-классы)	[css / selectors / псевдоклассы / псевдоклассы состояний элементов пользовательского интерфейса] (/ css / selectors / псевдоклассы / ui_element_states_pseudo-классы)
[css / selectors / псевдоэлементы] (/ css / selectors / псевдоэлементы)	[css / selectors / псевдоэлементы / :: after] (/ css / selectors / псевдоэлементы / :: after)	[css / selectors / псевдоэлементы / :: before] (/ css / selectors / псевдоэлементы / :: before)
[css / selectors / псевдоэлементы / :: first-letter] (/ css / selectors / псевдоэлементы / :: first-letter)	[css / selectors / псевдоэлементы / :: first-line] (/ css / selectors / псевдоэлементы / :: first-line)	[css / selectors / псевдоэлементы / :: region] (/ css / selectors / псевдоэлементы / :: region)
[css / selectors / псевдоэлементы / :: selection] (/ css / selectors / псевдоэлементы / :: selection)	[css / selectors / type] (/ css / selectors / type)	[css / selectors / универсальный селектор] (/ css / selectors / universal_selector)
[css / selectors / user-select] (/ css / selectors / user-select)	[css / selectors / zoom] (/ css / selectors / zoom)