Мой Справочник | CSS

Мой Справочник | CSS | Селекторы (select - выбирать, "выборщики")

Приоритетность (Варианты стилизации)
Тип	Описание	Примеры
1. Инлайновые стили	Самые приоритетные	`<p style="color: red;">...</p>`
2. Внутри тега `<style>`	2 место	`<style> p {color: red;} </style>`
3. Через id	3 место	`<p id="name">...</p> #name {color: red;}`
4. Через классы	4 место	`<p class="name">...</p> .name {color: red;}`
5. Cелекторы тегов	5 место	`<p>123</p> p {color: red;}`
6. Порядок в коде	6 место При равной специфичности играет роль порядок в коде, чем ниже, тем приоритетнее	`<p>123</p> p {color: red;} p {color: orange;}`

Вычисление cпецифичности
Комбинации	a (инлайн стили)	b (id)	c (class)	d (теги)	Результат
div	0	0	0	1	000(1)
ul .class	0	0	1	1	00(11)
#catalog .class	0	1	1	0	0(110)
<span style="color:red;">	1	0	0	0	(1000)

Наследуемые свойства (родитель-потомок):

line-height;
color;
font-size, font-family, font-style, font-weight;
text-transform, text-align, text-indent;
letter-spacing, white-space, word-spacing, direction;
list-style, visibilyty, cursor, border-collapse;
Принудительное наследование (для свойств, кот. не наследуются): inherit;
Принудительное присвоение (для свойств, у кот. низкий приоритет): !important; (часто использовать НЕ РЕКОМЕНДУЕТСЯ)
initial - по умолчанию
unset - если наследуется, то как у родителя, если нет - то initial
inherit - принудительно наследовать у родителя

Ненаследуемые свойства (родитель-потомок):

background;
position;
height, width;
margin, padding;

Полный список (значение yes или no в колонке Inherited?)

КЛАССЫ и ID не могут начинаться с цифры!!! ID только один на странице!!!

Виды селекторов
Тип	Описание	Примеры
p (название тега)	ТЕГОВЫЙ селектор	`p {color: red;}`	У всех параграфов текст станет красным
.name (с точкой)	КЛАССОВЫЙ селектор	`<p class="name">...</p> .name {color: red;}`	У ВСЕХ ТЕГОВ c классом name текст станет красным
#name (с "#")	id-селектор	`<p id="name">...</p> #name {color: red;}`	У ВСЕХ ТЕГОВ c id name текст станет красным
p a (через пробел)	ВЛОЖЕННЫЙ селектор КАСКАД, ПРОСТРОНСТВО ИМЁН	`<p> ... <i><a></i> ... </p> p a {color: red;}`	Все ссылки внутри параграфов станут красными, даже если они вложены в другие теги
p + a (через "+")	СОСЕДНИЙ селектор	`<p> ... </p> <a> p + a {color: red;}`	Все ссылки после параграфов станут красными
p > a (через ">")	ДОЧЕРНИЙ селектор	`<p> ... <a> ... </p> <p> ... <i><a></i> ... </p> так не сработает! p > a {color: red;}`	Все ссылки после параграфов станут красными, только если они являются ДОЧЕРНИМИ, в отличие от ВЛОЖЕННЫХ селекторов
.class1.class2 (без пробела)	ОБЪЕДИНЁННЫЙ селектор	`<div class="class1 class2"></div> .class1.class2 {color: red;}`	Сработает для тегов, имеющих одновременно и class1 и class2
.class1, .class2, class3 (через запятую)	ГРУППОВОЙ селектор	`<div class="class1"></div> <div class="class2"></div> <div class="class3"></div> .class1, .class2, .class3 {color: red;}`	Сработает для всех перечисленных классов class1, class2, class3
* {color: red;} (через *)	ОБЩИЙ селектор	`* {color: red;}`	Сработает для всех тегов и классов
.class1 * {color: red;}	ОБЩИЙ селектор для потомков класса	`.class1 * {color: red;}`	Сработает для всех тегов и классов внутри класса class1
.class1 *:псевдо-класс{color: red;}	Сочетания * с псевдо-классами	`.left-column :first-child {margin:0;}`	Сработает для всех дочерних первых элементов класса left-column
ИЗБИРАТЕЛЬНЫЕ селекторы
input[type="password"] (через [...] скобки)	Селектор АТРИБУТОВ	`<label for="password-id">Поле ввода пароля: </label> <input type="password" name="password" id="password-id"> input[type="password"] { border: 4px dotted red; }`	Поле ввода пароля: Выберет все инпуты с типом password
div[class^="column-"] (через "^")	Селектор по началу названия атрибута	`<div class="column-1"> </div> <div class="column-right"> </div>`	Выберет все теги div, у которых название класса начинается с подстроки "column-"
a[href$=".pdf"] (через "$")	Селектор по концу названия атрибута	`<a href="doc1.pdf"> </a> <a href="doc2.pdf"> </a>`	Выберет все ссылки, адреса кот. заканчиваются на ".pdf"
div[class="column"] (через "")	Селектор фразы атрибута	`<div class="column-1"> </div> <div class="right-column"> </div> <div class="column2"> </div> <div class="_column"> </div>`	Выберет все теги div, у которых в названии класса есть слово "column" в любом месте
div[class~="column"] (через "~")	Селектор по части названия атрибута	`<div class="column"> </div> <div class="right column"> </div>`	Выберет все теги div, у которых один из классов "column"
div[class\|="column"] (через "\|")	Селектор совпадению атрибута	`<div class="column"> </div> <div class="column-right"> </div>`	Выберет все теги div, у которых название одного из классов "column" или начинается с "column-"

Псевдоклассы (через ":")
Тип	Описание	Примеры
::before	Добавляет контент ДО ...	`<span>Some text<span> span::before { content:'before'; color: red; }`	beforeSome text
::after	Добавляет контент ПОСЛЕ ...	`<span>Some text<span> span::after { content:'after'; color: red; }`	Some textafter
::selection	ВЫДЕЛЯЮЩИЙ селектор Выделение текста курсором мыши (работает не везде, выручают префиксы)	`<span>Some text<span> span::selection { background-color: red; color: red; } <span>Some text<span> span::-moz-selection { background-color: red; color: red; }`	Some text
:first-child	Первый потомок	`<ul> <li>...</li> <li>...</li> <li>...</li> <li>...</li> </ul> ul li:first-child {color: red;}`	Первый элемент списка станет красным
:last-child	Последний потомок	`<ul> <li>...</li> <li>...</li> <li>...</li> <li>...</li> </ul> ul li:last-child {color: red;}`	Последний элемент списка станет красным
:nth-child(...)	Номер потомка	`<ul> <li>...</li> <li>...</li> <li>...</li> <li>...</li> </ul> ul li:nth-child(3) {color: red;}`	Третий элемент списка станет красным (odd) - нечётные; (even) - чётные; (2n) - каждый 2-ой; (1n + 6) - все элементы, начиная с 6-ого; (2n + 6) - каждый 2-й, начиная с 6-ого; (3n + 9) - каждый 3-й, начиная с 9-ого;
:not(...)	ОТРИЦАЮЩИЙ селектор	`<ul> <li>...</li> <li>...</li> <li>...</li> <li>...</li> </ul> ul li:not(:last-child) {color: red;}`	Все элементы кроме последнего станут красными Нельзя сочетать в селекторе несколько :not
:empty	"ПУСТОЙ" селектор	`<ul> <li></li> <li>2</li> <li>3</li> <li>4</li> </ul> ul li:empty {color: red;}`	Все пустые элементы списка станут красными
::first-line	Cелектор ПЕРВОЙ ЛИНИИ	`<p> Some text Some text Some text Some text Some text Some text Some text Some text Some text </p> p::first-line {color: red;}`	Первая строка параграфа станет красной
::first-letter	Cелектор ПЕРВОЙ БУКВЫ	`<span>Some text </span> span::first-letter {color: red;}`	Первая буква спана станет красной. Если стоят точки или символы перед первой буквой, то они вместе с буквой станут тоже красными
:only-child	Cелектор ЕДИНСТВЕННОГО ДОЧЕРНЕГО ЭЛЕМЕНТА	`<ul> <li></li> </ul> ul li:only-child {color: red;}`	Выберет все элементы списка, если они являются единственными дочерними элементами
:nth-last-child(...)	Cелектор ДОЧЕРНЕГО ЭЛЕМЕНТА ПО НОМЕРУ С КОНЦА	`<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> ul li:nth-last-child(2) {color: red;}`	Выберет дочерний элемент списка второй с конца
:first-of-type	Cелектор ПЕРВОГО ТИПА	`<ul> <li>1</li> </ul> <ul> <li>2</li> </ul> ul:first-of-type {color: red;}`	Выберет первый список в коде
:last-of-type	Cелектор ПОСЛЕДНЕГО ТИПА	`<ul> <li>1</li> </ul> <ul> <li>2</li> </ul> <ul> <li>3</li> </ul> ul:last-of-type {color: red;}`	Выберет последний список в коде
:nth-of-type(...)	Cелектор n-ОГО ТИПА	`<ul> <li>1</li> </ul> <ul> <li>2</li> </ul> <ul> <li>3</li> </ul> <ul> <li>4</li> </ul> ul:nth-of-type(3) {color: red;}`	Выберет 3-й список в коде
:nth-last-of-type(...)	Cелектор n-ОГО ТИПА С КОНЦА	`<ul> <li>1</li> </ul> <ul> <li>2</li> </ul> <ul> <li>3</li> </ul> <ul> <li>4</li> </ul> ul:nth-last-of-type(2) {color: red;}`	Выберет 2-й список в коде с конца
:only-of-type	Cелектор ЕДИНСТВЕННОГО ТИПА	`<ul> <li>1</li> </ul> ul:only-of-type {color: red;}`	Выберет список, если он является единственным в своём родителе
для ССЫЛОК
:link	Выбирает непосещенные ссылки Порядок в коде: :link :visited :hover :active	`<a class="some-link"> Some link </a> .some-link:link { color: violet; }`	Some link
:visited	Выбирает посещенные ссылки	`<a class="some-link"> Some link </a> .some-link:visited { color: darkviolet; }`	Some link
:hover	Работает при наведении курсора	`<a class="some-link"> Some link </a> .some-link:hover { color: red; cursor: pointer; }`	Some link
:active	Работает при нажатии кнопки мыши	`<a class="some-link2"> Some link </a> .some-link2:active { outline: 2px solid red; }`	Some link
:target	Для якорных объектов, через id	`h2:target { color: red; }`	Если заголовок h2 будет якорем для какой-либо ссылки, то по клику на связанную якорную ссылку, он поменяет цвет
для ФОРМ
:focus Работает не только с формами, может работать с ссылками, каторые также "табируются"	Работает для элемента, находящегося в фокусе (курсор в текстовом поле)	`<label for="text-id">Текстовое поле: </label> <input type="text" name="text" id="text-id"> input:focus {border: 4px solid pink;}`	Текстовое поле:
:enabled	Работает для форм и элементов форм, у кот. НЕ СТОИТ атрибут disabled	`<label for="year-id">Год рождения:</label> <select name="year" id="year-id"> <option disabled> 2001 </option> <option disabled> 2002 </option> <option disabled> 2003 </option> <option> 2004 </option> <option> 2005 </option> <option> 2006 </option> <option> 2007 </option> <option> 2008 </option> </select> option:disabled {text-decoration: line-through;}`	Год рождения:
:read-only	Работает для форм и элементов форм, у кот. стоит атрибут read-only	`Аналог: input[readonly]`	Работает не во всех браузерах
:read-write	Работает для форм и элементов форм, кот. доступных для редактирования	`Аналог: input:not([readonly])`	Работает не во всех браузерах
:required	Выбирает формы С атрибутом обязательного заполнения	`Аналог: input[required]`
:optional	Выбирает формы БЕЗ атрибута обязательного заполнения, обратный :required	`Аналог: input:not([required])`
:checked	Выбирает формы c атрибутом checked	`Аналог: input[checked]`	Работает с инпутами radio и checkbox
:valid	Выбирает элементы с КОРРЕКТНЫМ введённым значением	`<label for="first-name-id">Введите код: </label> <input type="text" name="first-name" id="first-name-id" pattern="[0-9]{3}\s[0-9]{3}" placeholder="XXX_XXX"> #first-name-id:valid {color: green; font-weight: bold;}`	Введите код: Корректность ввдённых данных должна быть указана в атрибуте pattern
:invalid	Выбирает элементы с НЕКОРРЕКТНЫМ введённым значением	`#first-name-id:invalid {color: red; font-weight: bold;}`
:in-range	Выбирает элементы, значение кот. ПОПАДАЕТ в указанный диапозон		Работает с type="mumber" min="..." max="..."
:out-of-range	Выбирает элементы, значение кот. НЕ ПОПАДАЕТ в указанный диапозон		Работает с type="mumber" min="..." max="..."
::placeholder	Стилизация placeholder в состоянии ПОКОЯ Стилизация placeholder в состоянии ВВОДА	`#input-id::placeholder {...} #input-id[placeholder] {...}`	jquery-плагин maskedInput $(".inputTel").mask("+7 (999)-999-99-99",{placeholder:"_"});