Типы CSS селекторов
Такие селекторы указываются в HTML документе (их можно увидеть в исходном коде страницы). Поддержка браузерами — 98.75%.
* Универсальный селектор Выбирает все элементы.
Синтаксис: * ns|* *|*
Пример: * будет соответствовать всем элементам на странице. tag Селекторы по типу элемента (по тегу) Этот базовый селектор выбирает тип элементов.
Синтаксис: элемент
Пример: input выберет все элементы . .class Селекторы по классу Этот базовый селектор выбирает элементы, основываясь на значении их атрибута class.
Синтаксис: .имяКласса
Пример: .index выберет все элементы . #id Селекторы по id Этот базовый селектор выбирает элементы, основываясь на значении их id атрибута. Идентификатор должен быть уникальным, т.е. используется только для одного элемента в HTML-документе.
Синтаксис: #имяИдентификатора
Пример: #index выберет элемент . [attr] Селекторы по атрибуту Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением.
Синтаксис: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] .
Пример: [autoplay] выберет все элементы (независимо от его значения).
Селекторы Псевдо
Знак : позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.
| Псевдо-классы ссылок: |   |
|---|---|
| a:link | Все не посещенные ссылки. |
| a:visited | Все посещенные ссылки. |
| a:active | Все активные ссылки. |
| a:hover | Элемент над которым проходит указатель мыши. |
| Псевдо-классы на одном уровне: |   |
|---|---|
| *:first-child | Любой первый элемент в блоке. |
| *:last-child | Любой последний элемент в блоке. |
| *:only-child | Любой элемент в блоке, если там всего один элемент. |
| *:nth-child(2) | Любой второй элемент в блоке. |
| *:nth-child(2n) | Любые элементы в блоке по счету: 2, 4, 6, … (чётные). |
| *:nth-child(even) | Любые элементы в блоке по счету: 2, 4, 6, … (чётные). |
| *:nth-child(2n+1) | Любые элементы в блоке по счету: 1, 3, 5, … (нечётные). |
| *:nth-child(odd) | Любые элементы в блоке по счету: 1, 3, 5, … (нечётные). |
| *:nth-child(3n+2) | Элементы номер 2, 5, 8 и так далее. |
| *:nth-last-child(2) | Любой второй элемент в блоке с конца. |
| Псевдо-классы на одном уровне с тем же тегом: |   |
|---|---|
| p:first-of-type | Выбор первого дочернего элемента . |
| p:last-of-type | Выбор последнего дочернего элемента . |
| p:only-of-type | Выбор дочернего элемента , если у родителя элемент всего один. |
| p:nth-of-type(2) | Выбор второго дочернего элемента . |
| p:nth-last-of-type(2) | Выбор второго дочернего элемента с конца. |
| Псевдо-классы Поля форм: |   |
|---|---|
| input:enabled | Выбор включенного . Обычно :enabled просто не пишется. |
| input:disabled | Выбор выключенного . |
| input:focus | Выбор , который находится в фокусе (в который установлен курсор). |
| input:checked | Выбранный элемент типа radio или checkbox . |
| Остальные Псевдо-классы: |   |
|---|---|
| :root | Выбор корневого элемента в документе. |
| p:empty | Пустой элемент , в котором нет ни текста ни элементов. |
| p:lang(ru) | Выбор элемента с атрибутом lang , значение которого начинается с ru . |
| :target | Выбор активного элемента на странице, который имеет якорную ссылку. |
| :not(p) | Выбор всех элементов, кроме . |
Псевдоклассы: наглядное пособие :: Псевдо-элементы
Знак :: позволяет выбрать элементы, которых нет в HTML. Можно и с одинарного : .
Для различия, Псевдо-элементы принято помечать двойным двоеточием :: , а псевдо-классы одинарным : . Но это лишь рекомендация, на деле можно все помечать одинарным : .
| p::first-letter | Выбирает первую букву элемента . |
| p::first-line | Выбирает первую строку элемента . |
| p::before | Вставляет указанное в content:» содержимое в начало . |
| p::after | Вставляет указанное в content:» содержимое в конец . |
| p::selection | Оформит выделенный (мышкой) текст внутри . |
Объединение селекторов
Чтобы объединить несколько отдельных селекторов в один, скажем так, сложный селектор нужно использовать символы комбинаторы — это: , > ~ + .
, Комбинатор запятая A, B — Это способ группировки, он выбирает все совпадающие узлы. Комбинатор потомков (пробел) A B — Выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности). > Комбинатор дочерних селекторов A > B — В отличие от пробела выбирает только прямых потомков — это только дочерними элементы первого уровня. ~ Комбинатор всех следующих элементов A ~ B — Выбирает все элементы, которые идут после указанного элемента и находятся на том же уровне вложенности (с тем же родителем). + Комбинатор первого следующего элемента
A + B — Выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
| Примеры комбинаторов | |
|---|---|
| div, span | Выберет оба элемента — и и . |
| div span | Все внутри . |
| div > span | Все , у которых родитель . |
| div ~ p | Все элементы , которые находятся сразу после . |
| div + p | Один элемент , который находится сразу после . |
| .c1.c2 | Элементы одновременно с двумя классами c1 и c2 . |
Классы CSS
Классы являются ключевыми селекторами CSS, так как дают практически неограниченную возможность по применению стилей к тем или иным HTML-элементам. Селектор класса всегда начинается с точки (.) после которой без пробела записывается имя класса. Общий синтаксис следующий:
Имя класса — это произвольное слово, которое вы придумываете сами, но есть ограничение, оно может состоять только из символов латинского алфавита (a-z, A-Z), цифр (0-9), символов дефиса (-) и подчеркивания (_). Причем имя класса не может начинаться с цифры или дефиса, за которым следует цифра. Например, классы .block-1, .-block3, .kartinkiBlock, ._7Block_vnizu — правильные, а .1-block, .-7block — нет.
Хорошо, класс мы создали, стили для него прописали, но как его применять к элементам? Ну, тут все проще простого. В теге необходимого элемента надо просто указать атрибут class= «имя_класса» , где имя_класса и есть имя придуманного вами класса. Причем один и тот же класс можно использовать в любом количестве тегов. Вот и все.
Как вы помните, CSS не чувствителен к регистру, но есть одно «НО». Имя класса всегда должно точно соответствовать тому, что вы пропишете в атрибуте class . Например, если у вас есть класс .menuHeader, то в теге надо писать class= «menuHeader» , а никак не class= «menuheader» , class= «MenuHeader» и т.д.
Ну что, пришла пора изучить пример, только не пугайтесь заранее такому количеству стилей. На самом деле, если вы хоть чуть-чуть к ним приглядитесь, то я уверен, что сразу во всем разберетесь.
Пример использования классов в CSS
Объединение классов CSS
В CSS допускается объединение классов, причем оно может использоваться для совершенно разных целей: для применения нескольких классов к одному элементу или для сужения выборки элементов.
Чтобы к элементу применились стили нескольких классов, необходимо эти классы перечислить через пробел в атрибуте class , причем, если у нескольких классов присутствует одно и то же свойство, то будет использовано то, которое находится ниже в коде таблицы стилей.
Применение нескольких классов CSS к одному элементу
.bold < font-weight: bold; >.kursiv < font-style: italic; >.blue < color: blue; >.green Жирный текст синего цвета.
Жирный курсивный шрифт текста.
Жирный текст зеленого цвета.
Жирный текст синего цвета.
Жирный курсивный шрифт текста.
Жирный текст зеленого цвета.
Как видите, в последнем параграфе примера текст зеленый, так как класс .green находится ниже, чем .blue. Поехали дальше.
Иногда возникает необходимость в объединении класса с другим классом или другим селектором (например, тега), либо то и другое одновременно, чтобы сузить рамки выборки элементов. Для этого все селекторы указываются подряд без пробела, в этом случае стили будут применены только к тем элементам, которые соответсвуют сразу всем этим селекторам. Общий синтаксис:
Пример объединения селекторов классов в CSS
p.note < /* стили параграфа-примечания */ border: 5px #c66 double; padding: 5px; >span.note < /* стили span для примечания */ font-weight: bold; color: #f00; >.kursiv < font-style: italic; >.bold < font-weight: bold; >.kursiv.bold используется в верстке довольно очень часто, особенно с селекторами тегов.
Примечание: вообще, объединение нескольких селекторов классов используется в верстке довольно редко , зато объединение классов с другими селекторами — очень часто , особенно с селекторами тегов.
В данном примере мы использовали один и тот же класс (.note) для разных тегов и с совершенно разными стилями. Также обратите внимание на последний тег , к тексту внутри него были применены не только свойства указанных классов, но и и общее для них свойство.
Это задание будет сложнее предыдущих. Сначала думал с ним немного повременить, но потом все же решил именно в классы его определить. Ведь лучше сейчас шишки набивать, чем потом, когда вы всерьез займетесь созданием своего сайта. Тем более, что со всеми свойствами CSS, которые здесь понадобятся, вы уже сталкивались, ну разве что одно вам может быть незнакомо. Итак.
- Сделайте колонку небольшой ширины, например 200px. Поместите в нее меню со ссылками. Оформите его так, как показано в результате задания.
- Ниже создайте еще один блок и напишите в нем несколько параграфов.
- Пусть ваш блок с меню всплывает влево, для этого вам потребуется свойство float.
- После всплытия меню, текст параграфов будет его обтекать справа. Сделайте так, чтобы текст не прилегал к меню вплотную, а был от него на определенном расстоянии, например в 20px. Но это еще не все. Он должен не просто не прилегать, но и не размещаться под меню, если текста достаточно много. Вот здесь вам придется голову поломать.
- Не вздумайте использовать таблицы.