В данном случае стили будут применены к элементу p, если это единственный p внутри своего родителя.

Псевдоэлемент ::before [14/20]

Псевдоэлемент before позволяет с помощью CSS добавить псевдотег внутрь другого элемента и оформить его. Cодержимое псевдотега задаётся с помощью свойства content.

Например, у нас есть такой HTML:

<div class="queen heart"><em>Дама</em></div>

Добавим CSS-правило с необычным селектором с двойным двоеточием:

.heart::before { content: "Черви"; }

И HTML изменится вот так:

<div class="queen heart"><before>Черви</before><em>Дама</em></div>

Но! Исходный HTML-код не изменится, тег <before> не попадёт в код страницы, а будет «виртуально» существовать где-то в браузере. Поэтому мы и используем приставку псевдо.

Ведёт себя псевдотег так же, как обычный <span> с текстом. Ему можно задавать дополнительные стили, например:

.heart::before {content: "Черви";color: red;}

Чтобы псевдоэлемент появился, ему необходимо задать свойство content. Достаточно даже пустой строки в значении свойства — content: "";.

Псевдоэлемент ::after [15/20]

Псевдоэлемент after аналогичен before. Отличие заключается в том, что он добавляет псевдотег не в начало, а в конец элемента. Например:

.heart::after { content: "Черви"; }

Даст такой результат:

<div class="queen heart"><em>Дама</em><after>Черви</after></div>

Псевдоэлементы before и after можно использовать одновременно. Это означает, что с помощью CSS вы можете добавить к любому элементу на странице два псевдоэлемента.

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

Псевдоэлементы ::first-line и ::first-letter [18/20]

Отвлечемся от карт и обратимся к тексту.

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

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

p::first-line { }

Аналогично псевдоэлемент first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.

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

p::first-letter { }

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

СЕЛЕКТОРЫ Ч3

Ищем в начале строки: [foo^="bar"] [1/18]

В первом курсе про селекторы мы разбирали селектор по атрибутам, когда запись input[type="text"] выберет все элементы input, у которых атрибут type равен text.

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

Запись вида [foo^="bar"] выберет все элементы, у которых значение атрибута foo начинается с подстроки bar.

Представьте, что у вас есть три класса для задания колонок разной ширины, например: column-1, column-2 и column-3.

У этих классов часть свойств повторяется, а разной является только ширина. Чтобы не дублировать CSS-код, вы можете вынести общие свойства колонок в правило с селектором [class^="column-"], а в остальных правилах задать только ширину:

[class^="column-"] { /* общие свойства: отступы, рамки, фон и т.д. */}.column-1 { width: 100px; }.column-2 { width: 200px; }.column-3 { width: 300px; }

То есть, первый селектор выберет все дивы с классами, начинающимися на column-:

<div class="column-1"></div><div class="column-2"></div><div class="column-3"></div>

Обратите внимание, что селектор чувствителен к регистру.

Ищем в конце строки: [foo$="bar"] [2/18]

Селектор вида [foo$="bar"] выбирает все элементы, значение атрибута foo которых оканчивается строкой bar.

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

<a href="batman.pdf">Скачать</a><a href="superman.doc">Скачать</a>

В этом случае вы можете назначать иконки в CSS по расширениям файлов:

a[href$=".pdf"] { /* иконка для PDF */}a[href$=".doc"] { /* иконка для DOC */}

И снова, селектор чувствителен к регистру.

Поиск подстроки везде: [foo*="bar"] [3/18]

Следующий вариант записи [foo*="bar"]

Будут выбраны все элементы, у которых значение атрибута foo содержит подстроку bar на любой позиции

Средитрёхэлементов:

<p class="person-name"></p><div class="some-person-info"></div><span class="date-person"></span>

селектор [class*="person"] выберет все.

Обратите внимание, что селектор чувствителен к регистру.

Поиск слов внутри строки: [foo~="bar"] [4/18]

Следующая запись: [foo~="bar"].

Такой селектор выберет все элементы, у которых значение атрибута foo содержит слово bar.

Входить должно именно слово, а не просто подстрока. То есть вхождение bar должно содержать с обеих сторон разделители: пробелы или начало/конец строки.

Поиск префиксов: [foo|="bar"] [5/18]

Селектор по атрибутам вида [foo|="bar"]

В данном случае будут выбраны все элементы, у которых значение атрибута foo содержит префикс bar, то есть либо полностью совпадает с bar, либо начинается со строки bar-(наличие знака переноса существенно). Другими словами, используя уже знакомые записи селекторов, этот можно заменить на два:
1. [foo="bar"] — все элементы, у которых значение атрибута foo полностью совпадает со значением bar.
2. [foo^="bar-"] — все элементы, у которых значение атрибута foo начинается со значения bar-.

В случае сразу нескольких атрибутов!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Для обращения к элементам, которые являются доступными на сайте (не заблокированными), можно использовать псевдокласс :enabled. Заблокированными считаются элементы форм, у которых установлен атрибут disabled. Подробнее об этом атрибуте можно посмотреть в этом курсе

Например:

input:enabled { /* какие-то стили */}

И наоборот, если нужно обратиться только к заблокированным элементам, то для этого есть псевдокласс :disabled

Как мы уже рассматривали в предыдущих курсах, есть разные способы запретить редактирование пользователем полей. Одним из таковых является установка атрибута readonly. Значение в данном случае доступно для чтения и копирования, но недоступно для редактирования.

В зависимости от этого параметра существует два селектора, которые позволяют выбирать каждую группу полей

Селектор :read-write выберет все поля доступные для редактирования

Селектор :read-only выберет все поля доступные только для чтения

Примерзаписи:

input:read-only {}

Мы уже разбирали, что при помощи специального атрибута required можно отметить поля, обязательные для заполнения

Используя селектор :required можно задать отдельные стили для этих полей

Например

input:required {}

Помимо :required существует селектор :optional, выполняющий обратное действие. То есть выберутся все элементы, у которых НЕ указан атрибут required

Пример записи

select:optional {}

При помощи селектора :checked можно обратиться ко всем элементам input с типами checkbox или radio, которые являются выбранными (отмеченными)

Например

input:checked {}

Всем элементам label стоящим после отмеченных элементов input установите цвет текста #1abc9c

input:checked+label{color:#1abc9c;}

Псевдоклассы :invalid и :valid [14/18]

При помощи разных типов полей (email, url и др.) или специфических настроек (pattern, min/max и др.) можно указать браузеру, какие именно данные мы ожидаем от пользователя в том или ином поле.

Селектор :valid выберет все элементы, у которых введенное значение удовлетворяет требованиям.

А селектор :invalid соответственно выберет элементы, у которых введенное значение некорректно.

Пример записи:

input:invalid { }

Псевдоклассы :in-range и :out-of-range [15/18]

В курсе, посвященном Формам и HTML5 мы разбирали специальный тип поля для ввода числовых значений <input type="number">. У этого поля можно определить максимальное и минимальное значение при помощи атрибутов max и min соответственно.

Селектор :in-range выбирает все элементы, значение которых попадает в указанный диапазон.

А селектор :out-of-range выбирает все элементы, значение которых НЕ попадает в указанный диапазон.

Например:

input:in-range {}

Чудеса с ~ и :checked [17/18]

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

Для этого нам нужно комбинировать :checked и ~, который позволяет выбрать все элементы, идущие за отмеченным полем. Пример:

input:checked ~ .item { color: red;}

Такое CSS-правило задаст красный цвет, всем элементам с классом item, расположенным после отмеченного поля.

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

Давайте разберём пример попроще. Добавим переключатели, которые будут показывать опредёленных котов.

Рамки,градиенты и тд

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

ФЛЕКСБОКСЫ

Флексбокс — это первый CSS-механизм, предназначенный для построения сеток и создания сложных раскладок блоков.

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

Нужно задать элементу свойство display: flex;. После этого происходит два события:

1. Элемент с display: flex; превращается во «флекс-контейнер» и внутри него начинает происходить вся магия гибкой раскладки.

2. Непосредственные потомки этого элемента превращаются во «флекс-элементы» и начинают играть по новым правилам.

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

Главная ось, flex-direction [2/31]

Вспомните, как ведёт себя обычный поток документа. Блоки и текст располагаются слева направо и сверху вниз.

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

Вместо направлений «лево» и «право» во флексбоксе используется понятие «главная ось». Поток флекс-элементов «течёт» вдоль главной оси от её начала к её концу.

По умолчанию главная ось направлена слева направо, но её можно разворачивать во всех направлениях с помощью свойства flex-direction, которое задаётся для флекс-контейнера. Значения свойства:

· row — значение по умолчанию, главная ось направлена слева направо.

· column — главная ось направлена сверху вниз.

· row-reverse — главная ось направлена справа налево.

· column-reverse — главная ось направлена снизу вверх.

Флекс-элементы всегда располагаются вдоль главной оси, независимо от её направления.

Поперечная ось [3/31]

Вместо направлений «верх» и «низ» во флексбоксе используется понятие «поперечная ось». Вдоль этой оси работают «вертикальные» выравнивания.

Поперечная ось всегда перпендикулярна главной оси и поворачивается вместе с ней:

· Если главная ось направлена горизонтально, то поперечная ось смотрит вниз.

· Если главная ось направлена вертикально, то поперечная ось смотрит направо.

Это не совсем логичное поведение, к которому надо привыкнуть. Получается, что поперечная ось никогда не смотрит вверх или влево. А свойства для поворота поперечной оси нет.

Распределение флекс-элементов, justify-content [4/31]

Вместо «горизонтального» выравнивания во флексбоксе используется свойство для распределения элементов вдоль главной оси — justify-content. Это свойство задаётся для флекс-контейнера.

Его значением по умолчанию является flex-start. При этом значении элементы располагаются у начала главной оси.