Все селекторы и свойства css. Селекторы CSS - полное руководство с примерами. Значение атрибута начинается с определенного текста
Игорь . Обновление:Октябрь 30, 2018 .
В стартовой статье данного раздела была дана общая информация, касающаяся , включая описание способов подключения стилей к HTML-коду страницы вебсайта (документа), который определяет наличие тех или иных элементов на вебстранице.
В этой публикации мы рассмотрим, как правильно составлять и прописывать свойства CSS для всех элементов, чтобы браузер смог их идентифицировать и корректно отобразить на странице.
В частности, разберем, что представляет из себя в общем виде отдельно взятое стилевое правило, которое включает в себя селектор, а также свойства и их значения.
Синтаксис и варианты записи правил CSS
Поскольку каскадные таблицы стилей представляют из себя, пусть и специализированный, но все же язык, допустимо провести аналогию совокупности правил CSS с простым текстом, где каждое слово состоит из букв, предложение — из слов, а сам текстовый фрагмент — из предложений.
Учитывая эту наглядную ассоциацию, можно вывести логическую последовательность, которая касается структуры CSS (она является максимально оптимальной, на мой скромный взгляд):
- значения (или параметры) , которые выражается в числах, коде цвета, названии шрифта и т.п., в соответствии с нашей аналогий можно считать буквами;
- структурной единицей CSS является свойство , определяющее свою часть внешнего вида элемента на странице (его цвет, шрифт текста, размеры, отступы, позицию и т.д.), которому соответствуют конкретные значения (одно или несколько). Здесь совокупность названия свойства и его параметра можно сравнить со словом (которое также может состоять из одной или более букв) в стандартном текстовом фрагменте;
- правило CSS — селектор (наименование стиля) вместе с набором свойств CSS для каждого элемента полностью определяет его оформление и местоположения на странице. Структурно ассоциируется с предложением (совокупностью отдельно взятых слов в обычном тексте);
- полное собрание всех правил CSS для конкретного документа (веб-страницы) обеспечивает его корректное отображение в браузере. Сравним это с завершенным отрывком текста.
Возможно, предложенная мною ассоциация немного притянута за уши, однако, мне кажется, она все-таки поможет начинающим понять общую структуру языка CSS.
Итак, каждому свойству присваивается конкретное значение (параметр), причем, их может быть несколько. Соответствующий набор свойств (правило) применяется к определенному селектору. Схематически правило CSS можно отобразить так :
Впереди помещается селектор, затем ставятся фигурные скобки (открывающая и закрывающая), между которыми и находятся свойства CSS с присвоенными им значениями, название каждого свойства отделяется от соответствующего ему параметра двоеточием. Все свойства вместе со значениями разделяются между собой точкой с запятой. Посмотрим на живой пример:
Body { font-size: 14px; background: #00ff00 url("west.png") repeat-x; }
Обратите внимание на то, что свойство background имеет сразу несколько значений: цвет фона (#00ff00), путь до фонового изображения ("west.png") и разрешение на его повторение по горизонтали (repeat-x). Наверное, вы заметили, что подобный вариант записи несколько отличается от схемы, представленной чуть выше.
На самом деле никакого несоответствия здесь нет. Поскольку CSS не чувствителен к пробелам, переносам строк, символам табуляции, стилевые правила могут быть записаны самыми разными способами, которые используются в конкретных ситуациях.
Скажем, расширенная запись правила, образец которой только что был представлен, наиболее удобна для восприятия, а потому применяется обычно для изучения стилей, ну или в "сыром" файле style.css, который создан для нового сайта, а потому еще не доведен до ума. Есть и другая разновидность этого же самого варианта записи CSS правила:
Body { font-size: 14px; } body { background: #00ff00 url("west.png") repeat-x; }
Как видите, здесь для каждого свойства повторяется один и тот же селектор. Это не является ошибкой по причинам, упомянутым выше, однако такой формат записи правила засоряет код и усложняет его восприятие, а потому практически не используется.
Расширенный вариант записи можно представить и без переносов:
Body { font-size: 14px; background: #00ff00 url("west.png") repeat-x; }
Но это не все. Все пробелы, как и разделительный символ (точку с запятой) после последнего свойства (перед закрывающей фигурной скобкой), можно опустить. Это также вполне легитимная форма CSS правила, менее объемная, что хорошо для оптимизации сайта, но менее читабельная:
Body{font-size:14px;background:#00ff00 url("west.png") repeat-x}
После того, как дизайн сайта готов и внесены все необходимые изменения в файлы стилей CSS, их соответствующим образом в целях оптимизации веб-ресурса, при этом автоматически удаляются все пробелы. Это можно сделать и вручную, но для чего тратить драгоценное время настолько нерационально? Ведь даже для небольшого сайта файл style.css может содержать немало стилевых правил.
Селекторы, свойства и применение стилей
Я уже отмечал, что с течением времени происходит все более тесное сближение HTML и CSS. Если на заре зарождения интернета в его сегодняшнем виде внешний вид элементов на веб-странице описывался с помощью атрибутов тегов гипертекстовой разметки, то в наши дни слишком частое использование такого метода считается , поскольку перегруженный ХТМЛ-код часто не способствует должной оптимизации страниц сайта, что в том числе вредит его SEO продвижению.
CSS (перед идентификатором ставится значок решетки):
#area {color: green; border: 2px solid #d6c99a}
Последующие ниже варианты могут содержать как селекторы тегов, так и классы с идентификаторами.
Для чего нужны такие варианты задания размеров? Дело в том, что далеко не всегда наилучшим решением является использование стандартных относительных величин, включая проценты. Порой выгоднее связать величину шрифта с высотой и шириной окна браузера. Скажем, ежели область просмотра по высоте равна 800px, то 1vh = 8px, а при ширине 1500px — 1vw = 15px.
Единицы vmin и vmax определяются соответственно минимальными и максимальными размерами области по высоте и ширине. Образец: высота окна браузера 700px, а ширина — 1300px. В этом случае vmin = 7px, а vmax = 13px.
При установке размеров нужно обязательно указывать единицы (например, height: 55px), иначе браузер некорректно будет отображать соответствующие элементы. Значения, равные нулю, к данному правилу не относятся, их можно обозначать двумя способами (padding: 0 или padding: 0px), по понятным причинам с подавляющим преимуществом лидирует первый вариант.
Проценты
Этот вид единиц я решил упомянуть отдельно. Выше я уже сказал о преимуществе использования относительных значений при задании свойств. Это в полной мере относится и к процентам.
Table {width: 100%; /* Ширина таблицы в процентах */}
Записи в процентах применяются довольно часто, особенно тогда, когда необходимо установить значение относительно родителя или когда размеры находятся в зависимости от неких внешних обстоятельств. К примеру, ширина элемента, равная 100%, будет подстраиваться под экраны самых разных устройств и корректно там отображаться.
Ключевые слова
Разберем некоторые слова, которые играют роль параметров свойств и определяют то или иное положение либо внешний вид элемента. Вот несколько наглядных примеров.
1. Значения свойства text-align , которые способствуют выравниванию текста по горизонтали: center | justify | left | right | start | end. Вот пример c параметром justify :
P {text-align: justify}
Эта запись означает, что текст абзаца выравнивается одновременно по левому и правому краю :
2. CurrentColor — соответствует значению свойства color текущего элемента и указывает цвет для областей, которые по умолчанию его не получают. Допустим, контейнер с классом «bl-2» вложен в «bl-1»:
И для обоих прописаны стили:
Bl-1 { padding: 10px; /* Поля вокруг внутреннего контейнера */ background: currentColor; /* Цвет фона */ } .bl-2 { color: blue; /* Цвет текста */ padding: 10px; /* Поля вокруг текста */ background: #ccc; /* Цвет фона */ }
Если в отношении элемента не указан цвет текста (свойство «color»), то по умолчанию текстовый фрагмент будет окрашен в черный (в большинстве популярных браузеров). В нашем примере для внешнего контейнера («bl-1») color как раз отсутствует. Вследствие этого при указании значения «currentColor» фон этого контейнера примет черный окрас :
3. Inherit — это ключевое слово в роли параметра соответствующих значений родительских элементов. Образец:
И CSS правила для него:
Bl-1 { border: 4px solid red; padding: 10px; } .bl-2 { border: inherit; padding: inherit; }
В итоге оформление рамок (border) и размеры полей (padding) перенесены с родительского блока (bl-1) на внутренний (bl-2) :
4. Initial — применяется в тех случаях, когда требуется установить исходные параметры свойств. Скажем, помогает восстановить значения, установленные браузером по умолчанию, либо определить начальные параметры, которые были изменены в результате наследования. Пример:
Параметры свойств CSS
Существуют самые разнообразные значения, которые определяют те или иные стили, определяющие внешний вид элементов на веб-странице.
Читайте подробности далее
И стили для него:
H2 { color: #2e15d1; font-family: Verdana, sans-serif; } p { color: green; } .init { color: initial; font-family: initial; }
С помощью класса «init» внешний вид фрагмента абзаца p, заключенного в тег span, и нижнего заголовка H2, изменен в соответствии с настройками их стилей по умолчанию.
5. Unset — это параметр, являющийся по сути "гибридом" inherit и initial. Определяет параметр свойства как inherit, ежели свойство наследуется от родителя, в противном случае — как initial.
Пример 1 (действует как inherit):
Цвет текста зеленый (green) - наследует значение свойства "color" для класса "zzz"
Цвет текста красный (red) в соответствии со значением свойства "color" для тега p
P {color: red} .zzz {color: green} .xxx p {color: unset}
В соответствии с правилами CSS свойство color наследуется , поэтому «unset» в нашем примере возвращает зеленый цвет текста для контейнера «xxx», который является потомком «zzz» :
Пример 2 (работает как initial):
Цвет рамки черный - значение по умолчанию
Цвет рамки (blue - синий) задан в свойствах контейнера div
Div { border: 2px solid blue; margin-bottom: 10px; margin-top: 10px; padding: 10px; } .xxx { border-color: unset; }
Так как по правилам таблиц стилей свойство border не наследуется , то «border-color: unset» возвращает цвет рамки к значению по умолчанию, то есть она приобретает черный оттенок.
URL, или адрес
Этот параметр содержит в себе и применяется, когда нужно, например, указать к файлу с изображением (читайте с помощью HTML тега img). При этом используется ключевое слово url () , где между скобками и указывается путь до графического файла:
Body { background: url(https://сайт/images/star.jpg) no-repeat; /* Абсолютный путь */ } div { background: url(images/globus.jpg) no-repeat; /* Относительный путь */ }
Время
Используется, например, при реализации анимационных эффектов (да-да, на чистом CSS можно создавать теперь и такие вещи), где параметры указываются в секундах (s) или миллисекундах (ms). Значения могут быть как в виде целых, так и дробных чисел. При этом надо помнить, что нельзя допускать пробела между числом и единицей измерения (2s, 50ms)./p>
Рассмотрим пример.
И, соответственно, стили для него:
Loading { width: 440px; margin: auto; padding: 20px; background: #c49746; color: #fff; text-align: center; } .spin { display: inline-block; width: 70px; height: 70px; border: 10px double #ccc; border-right: 10px double transparent; border-radius: 70px; /* Анимация */ animation: spin 5s linear 0s infinite normal; } /* Устанавливаем вращение */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
На этой странице можете не только посмотреть результат, но и попытаться отредактировать некоторые свойства, так сказать, на практике, в общем, поэкспериментировать. Естественно, начинающим изучать каскадные таблицы стилей пока трудно осознать и принять к сведению тонкости анимации, но продолжение обязательно последует, поэтому подписывайтесь на свежие материалы обязательно, чтобы вовремя получить желаемое. Но продолжим.
Строки
Этот вид параметра позволяет добавлять фрагменты текста. Строки нужно обязательно заключать в кавычки (одинарные или двойные). Причем, если внутри строки требуется взять в кавычки слово или фразу, то эти виды кавычек можно комбинировать.
Скажем, ежели всю строку вы берете в одинарные кавычки, то внутренний текстовый фрагмент — в двойные, и наоборот. Разрешается также применять один и тот же вид, только в этом случае необходимо экранировать внутренние кавычки, добавляя перед ними обратный слеш «\»:
- свойство: "строка "контента""
- свойство: "строка "контента""
- свойство: "строка \"контента\""
Для начала ХТМЛ-код:
Актуальная версия статьи.
А теперь стили:
New::after { content: "обновлено"; color: red; }
Цвет
С целью обозначения цветов для свойств при составлении правил CSS могут использоваться различные параметры. Остановимся вкратце на каждом из них:
1. Название . Правда, задавать таким способом можно не все, а только часть оттенков («red» — красный, «green» — зеленый, «black» — черный, «orange» — оранжевый, «yellow» — желтый, «olive» — оливковый и некоторые другие). Их также можно отнести к ключевым словам.
P {color: green}
2. Hex (шестнадцатеричный код) . Основой шестнадцатеричной системы, в отличии от известной всем десятеричной, являются 16 символов: 10 цифр (от 0 до 9) и 6 первых букв латинского алфавита (A, B, C, D, E, F). Буквы от A до F соответствуют числам от 10 до 15.
P {color: #f8f9e3}
3.1. RGB — можно задавать значение цвета, исходя из десятеричной системы. Название данного метода является аббревиатурой трех основных задействованных в ней цветов: R ed (красный), G reen (зеленый), B lue (синий). Оттенки каждого из них находятся в диапазоне от 0 до 255. Для применения этой системы необходимо впереди прописать rgb, а в скобках указать каждый из компонентов цвета: rgb (240, 0, 180). Также не возбраняется использовать проценты:
Div { background-color: rgb (210, 0, 90); color: rgb (100%, 50%, 15%); }
3.2. RGBA — расширенный вариант предыдущего метода RGB, содержащий альфа-канал, который устанавливает прозрачность элемента в диапазоне от 0 до 1. Параметр «0» соответствует полной прозрачности, а «1» — совершенной непрозрачности.
Body {background-color: rgba (255,255,255,.9)}
4.1. HSL — наименование этого метода также представляет из себя не что иное как аббревиатуру, которая включает первые буквы трех слов: H ue (оттенок), S aturate (насыщенность) и L ightness (светлота). Именно эти характеристики в совокупности определяют конечный цвет. При этом оттенок расположен на конкретном месте цветового круга:
Поскольку весь круг составляет 360°, то каждому оттенку (hue) соответствует вполне конкретное значение в градусах в диапазоне от 0° до 359°. При этом параметры основных оттенков таковы: 0° — красный, 120° — зеленый, 240° — синий.
Насыщенность и светлота измеряются в процентах (от 0 ло 100%). Для saturate параметр 0 значит отсутствие цветовой гаммы, а 100% — максимально насыщенный цвет. Чем больше значение lightness, тем светлее тон, 0 соответствует черному, а 100% — белому.
Div {background-color: hsl(40,90%,15%)}
4.2. HSLA — по аналогии с RGBA является расширенным вариантом HSL, к которому добавлен показатель прозрачности.
Div {color: hsla(120,100%,50%,0.6)}
Угол поворота или наклона
В CSS в качестве параметров тех или иных свойств может применяться угловые характеристики (основа — круг). Вот какие единицы при этом используются:
- градусы — deg (1 полный круг составляет 360deg);
- грады — grad (полный круг 400grad);
- радианы — rad . Целый круг равен 2π (приблизительно 6.2832rad);
- повороты — turn (1 turn приравнивается к полному повороту).
Немаловажно отметить, что могут использоваться отрицательные значения . Ниже даны наглядные примеры с параметрами некоторых углов (поворотов):
Для наглядности применим характеристики поворота для реализации градиентной заливки фона и в качестве одной из составляющих нашего образца поместим на страницу определенный текст:
Градиентная фоновая заливка.
А теперь составим и правило CSS для такого фона:
Body { background: #f5e573; background: linear-gradient(-5deg, #f5e573, #f7f4db 50%, #f7f6eb); }
Результат можете оценить на этой странице и там же поупражняться, отредактировав стили по своему желанию. Это тоже будет полезным для приобретения практических навыков.
Влад Мержевич
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов.
Lorem ipsum dolor sit amet.
В этом примере тег является дочерним по отношению к тегу
Поскольку он находится внутри этого контейнера. Соответственно
Выступает в качестве родителя .
Lorem ipsum dolor sit amet.
Здесь теги
и
никак не перекрываются и представляют собой соседние элементы. То, что они расположены
внутри контейнера Никак не влияет на их
отношение. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.
Соседними здесь являются теги и , а также и . При этом и к соседним элементам не относятся из-за того, что между ними расположен контейнер .
Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий.
Селектор 1 + Селектор 2 { Описание правил стиля }
Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к Селектору 2, но только в том случае, если он является соседним для Селектора 1 и следует сразу после него.
В примере 11.1 показана структура взаимодействия тегов между собой.
Пример 11.1. Использование соседних селекторов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Результат примера показан на рис. 11.1.
Рис. 11.1. Выделение текста цветом при помощи соседних селекторов
В данном примере происходит изменение цвета текста для содержимого контейнера , когда он располагается сразу после контейнера . В первом абзаце такая ситуация реализована, поэтому слово «consectetuer» в браузере отображается красным цветом. Во втором абзаце, хотя и присутствует тег , но по соседству никакого тега нет, так что стиль к этому контейнеру не применяется.
Разберем более практичный пример. Часто возникает необходимость в текст статьи включать различные сноски и примечания. Обычно для этой цели создают новый стилевой класс и применяют его к абзацу, таким способом можно легко изменить вид текста. Но мы пойдем другим путём и воспользуемся соседними селекторами. Для выделения замечаний создадим новый класс, назовём его sic , и станем применять его к тегу
. Первый абзац после такого заголовка выделяется цветом фона и отступом (пример 11.2). Вид остальных абзацев останется неизменным.
Пример 11.2. Изменение стиля абзаца
HTML5 CSS 2.1 IE Cr Op Sa Fx
Методы ловли льва в пустыне
Метод последовательного перебора
Пусть лев имеет габаритные размеры L x W x H, где L - длина льва от кончика носа до кисточки хвоста, W - ширина льва, а H - его высота. После чего пустыню разбиваем на ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва. Учитывая, что лев может находиться не строго на заданном участке, а одновременно на двух из них, клетку для ловли следует делать повышенной площади, а именно 2L x 2W. Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина льва или, что хуже, только его хвост.
Важное замечание
Для упрощения расчетов хвост в качестве погрешности измерения можно отбросить и не принимать во внимание.
Результат данного примера показан на рис. 11.2.
Рис. 11.2. Изменение вида абзаца за счёт использования соседних селекторов
В данном примере текст отформатирован с применением абзацев (тег
), но запись H2.sic + P устанавливает стиль только для первого абзаца идущего после тега
, у которого добавлен класс с именем sic .
Соседние селекторы удобно использовать для тех тегов, к которым автоматически добавляются отступы, чтобы самостоятельно регулировать величину отбивки. Например, если подряд идут теги
и
,
то расстояние между ними легко регулировать как раз с помощью соседних селекторов.
Аналогично дело обстоит и для идущих подряд тегов
и
и
А также в других подобных случаях. В примере 11.3 таким манером изменяется величина отступов между указанными тегами.
Пример 11.3. Отступы между заголовками и текстом
HTML5 CSS 2.1 IE Cr Op Sa Fx
Заголовок 1
Заголовок 2
Абзац!
Поскольку при использовании соседних селекторов стиль применяется только ко второму элементу, то размер отступов уменьшается за счёт включения отрицательного значения у свойства margin-top . При этом текст поднимается вверх, ближе к предыдущему элементу.
Вопросы для проверки
1. Какие теги в данном коде являются соседними?
Формула серной кислоты:H2SO4
И
- и
- и
- и
- и
2. Имеется следующий код HTML :
Великая теорема Ферма
X n + Y n
= Z n
где n - целое число > 2
Какой текст выделится красным цветом с помощью стиля SUP + SUP { color: red; } ?
- Вторая «n»
- Вторая и третья «n».
В прошлом уроке мы разбирали способы подключения CSS. Теперь перейдём к самому языку.
Как и любой другой язык, CSS имеет свой, однако предельно простой синтаксис. Состоит всего из двух компонентов:
1. Селектор
(выбор объекта, с которым будем работать. Например, заголовок, div, таблица и тд.)
2. Блок стилей
- описание одного или нескольких свойств объекта - цвет, размер и тд. Заключается в фигурные скобки {}
Мы видим, как заголовку - селектор, в блоке стилей присваивается свойство цвет текста (color
) - синий.
Блок стилей
состоит из свойств
и их значений
, которые при перечислении разделяются точкой с запятой (;)
, как в примере ниже.
Теперь мы добавляем ещё одно свойство
- форматирование текста (font)
. В нём мы придаём значение
размер текста - 20 пикселей
.
Пример работы CSS
Создайте в любом месте папку, например, урок 2 . В ней создайте файл style.css . В него скопируйте весь код ниже. В коде CSS мы задаём свойства для тега и заголовкови
.
Код CSS (файл style.css )
Body{
background: gray;
color: white;
}
h1{color:#0085cc;}
h2{color:white;}
Обратите внимание, не будет разницы, записывать блок стилей в строчку (h1,h2) или в столбик (body). И тот, и другой вариант будут работать. Выбирайте так, как Вам удобно.
Теперь создаём HTML-файл. Неважно, какое будет название, главное, чтобы путь к файлу с CSS кодом был указан верно. Указывается также как и в ссылках, путях к изображениям. В примере ниже указан путь (style.css) в ту же директорию, что и html-файл. То есть оба файла должны быть в одной папке.
Код HTML
Заголовок h1
Заголовок h2
Результат работы кода можно увидеть по ссылке ниже.
Селекторы CSS
В примерах выше в качестве селекторов использовались элементы страницы : body, h1, h2. Однако бывают ситуации, когда нужно работать с конкретным элементом, а не со всеми. Например, все заголовки были синего цвета, а один, в конце, чёрного. Для это существуют разные виды селекторов. Давайте рассмотрим их подробнее.Идентификаторы
Идентификатор элемента - это селектор, который присваивается одному элементу и делает его уникальным. Задаётся при помощи параметра id .
Данному параграфу присвоен id. У него будут уникальные свойства.
Параметры текста останутся по умолчанию.
Разберём пример
Код HTML и CSS
Текст который будет синего цвета, потому что есть id
Цвет текста останется по умолчанию.
Сначала в стилях у всех параграфов в свойстве цвета указан черный цвет, а текст параграфа с id "blue" будет синим. Селектор в данном случае состоит из элемента (p - параграф), разделителя (# - обозначение идентификатора) и имени идентификатора (blue).
Важно отметить то, что идентификатор в теории даётся только одному элементу, которому хотим придать уникальные свойства. Да, в некоторых браузерах, если дать один и тот же идентификатор двум элементам, то может сработать. Однако, такое получится не во везде.
Если хотите задать стили для нескольких элементов, то следует использовать классы .
Классы
Класс (class) - это селектор, который позволяет применить стили к одному и более элементам. Например, id применим только к одному уникальному элементу. В качестве значения принимается имя элемента.
Рассмотрим пример:
Код HTML и CSS
Цвет текста чёрный.
Текст синего цвета.
Текст полужирный и синего цвета.
Цвет текста чёрный.
В результате параграф с идентификатором (id
) blue будет иметь текст синего цвета, элементы с class
blue будут выделены полужирным шрифтом и синим цветом. А все остальные элементы p
будут иметь шрифт чёрного цвета.
Как видите, класс можно применить несколько раз. Соответственно всё элементы будут иметь свойства описанные для данного класса.
Унифицированные селекторы
Унифицированные селекторы (.) - это селектор, который можно присвоить разному типу элементов, например, и заголовкам, и параграфам, и блокам (div). Самый распространённый вариант. До этого мы использовали конструкцию в коде CSS p#blue и p.blue , то есть сначала указывали тип элемента (p - параграф), а потом уже сам идентификатор или класс. Так вот можно указывать конструкцию проще, сразу начинать с .blue . Подобный селектор будет применим уже не только к параграфам, а к другим элементам.
Код HTML и CSS
Заголовок с идентификатором.
Цвет текста чёрный.
Текст полужирный и синего цвета.
Текст в строчном элементе тоже полужирный и синего цвета
В результате унифицированный селектор, в данном случае класс .blue
, мы применили и к парафграфу (p), и к блоку (div), и к строковому элементу (span). Результат везде одинаковый - текст полужирный и синего цвета.
Контекстные селекторы
Контекстный селектор - это селектор, который выделяет один элемент в группе других элементов. В написании выделяется пробелом. Чтобы было легче, сразу перейдём к примеру. Допустим мы хотим, чтобы полужирный текст, содержащийся в параграфах выделялся ещё каким-либо цветом.
Код HTML и CSS
Цвет текста чёрный. Но теги полужирный шрифта тут не упоминаются.
Обычный полужирный текст, который не содержится в параграфе. Поэтому и цвет у него не меняется.
И внимание!!! Параграф с фразой полужирным шрифтом синего цвета
Соответственно синим будет выделен только тот полужирный текст (strong), который будет в параграфе (p).
Группировка селекторов
Группировка селекторов - это такая конструкция таблицы стилей, где блок объявления стилей обращён к одному и более ранее упоминаемым элементам и добавляет новое свойство.
По тексту сложно понять. Лучше сразу к примеру.
H1, h2, h3{ color:blue; }
h1{ font-size:18px; }
h2{ font-size:16px; }
h3{ font-size:14px; }
В первой строке мы упоминаем сразу несколько элементов
. Для того, чтобы обратиться сразу к нескольким элементам надо в селекторе перечислить их через знак ,
(запятую) и пробел. Перед последним перечисляемым элементом запятая и пробел НЕ нужны
.
Последующими упоминаниями данных элементов мы добавляем им значения новых свойств. В данном случае размера шрифта.
Код HTML и CSS
Заголовок h1
Заголовок h2
Заголовок h3
В результате все заголовки будут синего цвета. Однако разных размеров, так как последующие записи в таблице стилей давали заголовкам разный размер.
Использование группировки - вопрос спорный. Среди преимуществ можно отметить то, что удаётся избегать крупных частей кода, которые по содержание будут во многом дублировать себя. Из недостатков можно сказать, что использование подобного кода, где свойства к тому или иному элементу дописываются в разных местах достаточно проблемно и неудобно. Конечно, при грамотном последовательном написании можно избежать подобных минусов, но это уже другой вопрос.
Спасибо за внимание! Урок окончен!
Сегодня мы рассмотрим такое понятие как селекторы CSS и как с их помощью мы можем сократить нашу разметку HTML, сделав её чище.
Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор.
P {color: red} div span {background: green} ul li {list-style: none}
Селекторы class и id
В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:
На что стоит обратить внимание:
- Классы и идентификаторы можно присваивать любым (всем) тегам.
- Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
- Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
- Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
- Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.
Как обратиться к классу или id в файле стилей (CSS)?
Смотрим пример:
#first {color: red;} /* обращаемся к id с именем first */ .second {color: blue;} /* обращаемся к классу с именем second */ #first .second {color: orange;} /* обращаемся к классу с именем second, ТОЛЬКО если он находится ВНУТРИ тега с идентификатором first */ .first .third {color: grey;} /* обращаемся к классу с именем third, ТОЛЬКО если он находится ВНУТРИ тега с классом first */
В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (.).
Использование классов и идентификаторов очень удобно, но оно увеличивает нашу HTML разметку, в идеале (которого никогда нет) мы вовсе не должны их использовать, вместо них мы будем использовать комбинации и группировки селекторов, о них и будет вся остальная часть статьи, но! Но это совсем не означает, что вы должны полностью отказаться от использования классов и идентификаторов, просто вы должны иметь ввиду, что очень часто вместо создания нового class или id можно обойтись приёмами, описанными ниже и они также могут быть вполне удобны.
В чём различие class и id?
Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:
То цвет текста станет красным, несмотря на то, что класс находится ниже по коду и если бы у них был равный приоритет текст стал бы синим.
По синтаксису: в случаи с классом мы можем выбрать, у какого именно тега должен находиться данный класс, для этого после имени тега БЕЗ пробела мы должны обратиться к классу. Пример:
Myclass {свойства} /* применятся ко всем тегам, которые содержат класс myclass */ div.myclass {свойства} /* применятся только к тегам div, которые содержат класс myclass */
Для id это тоже будет работать, но такая запись лишена всякого смысла, так как id не может повторяться на странице, а значит достаточно просто объявлять id, без тега к которому оно относится:
Вроде бы осталось только одно неоговорённое отличие, и оно касается темы, которую в ближайшем будущем я не планировал затрагивать на этом блоге – Javascript. Но всё же обязан доложить вам о нём: если вы хотите обратиться к элементу с помощью Javascript, то для этой цели очень удобным будет наличие id у этого элемента. Чтобы обратиться к элементу по его классу в Javascript нет такой встроенной возможности, вам придётся использовать вспомогательные функции + это не всегда кроссбраузерно.
Итог: id и class используем, но в меру, при этом всегда спрашивая себя, а можно ли здесь обойтись без них и насколько это целесообразно.
Родственный селектор
Div p {color: green;} /* Селектор по потомку */ p {color: red;} /* селектор по тегу */
Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегам p вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:
Третий уровень
Прямой наследник (первый уровень)
Второй уровень
Прямой наследник (первый уровень)
В таком случае мы должны использовать так называемый родственный селектор, для его обозначения используется угловая скобка, пробелы можете ставить, можете не ставить, я бы не советовал:
Div>p {color: blue;} /* только первый уровень вложенности */ div p {color: blue;} /* абсолютно все параграфы внутри div */
Универсальный селектор
С этим разобрались, у нас на вооружении уже 3 вида селекторов, теперь хочу вам рассказать о весьма необычном селекторе, который выделяется среди всех остальных – это так называемый универсальный селектор, который обозначается звёздочкой (*):
* {margin: 0; padding: 0;}
Так у меня начинается каждый новый проект, советую вам делать также. Универсальный селектор распространяется на все элементы страницы (теги), но имеет нулевой приоритет (ниже только отсутствие приоритета вовсе). Его обычно используют, чтобы перебить CSS свойства, которые браузеры устанавливают по умолчанию для некоторых тегов. Представьте себе, и такое имеет место быть! Достаточно многим тегам браузеры по умолчанию устанавливают свои свойства, например, тегу гиперссылки синий цвет текста и подчёркивание, тегу body они задают поля (padding) и тд. Нам это запоминать, знать и использовать совсем не к чему, поэтому самые банальные свойства мы сразу же убираем с помощью универсального селектора, однако я бы не советовал дописывать в него что-то ещё (или дописывать, но аккуратно), несмотря на наименьший (нулевой) приоритет универсального селектора, он в некоторых случаях всё же может перебить вам другие свойства, так что имейте это в виду.
Кстати говоря, при работе с селекторами, как и при любой работе связанной с вёрсткой макета очень удобно использовать просмотр элементов страницы. Если вы ещё не в курсе таких вещей как Opera Dragonfly, Firebug и веб-инспекторы в целом, то вам без преувеличений срочно нужно прочесть статью по ссылке выше! А кто уже использовал подобные вещи, прошу дальше за мной.
Псевдо-классы
В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся (:first-child, :link, :visited, : lang()):
Прямой наследник (первый уровень)
Третий уровень
Прямой наследник (первый уровень)
Второй уровень
Прямой наследник (первый уровень)
Результат:
Естественно можно комбинировать селекторы как захотим, например:
Div>span p:first-child {color: green;} /*сработает, если p является первым ребёнком своего родителя и находится внутри тега span, который является прямым потомком тега div */
Название представленного выше псевдо-класса говорит само за себя first-child - первый ребёнок.
Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет:
A:link {color: blue;} /* у не посещённых ссылок задаём синий цвет, и по умолчанию они подчёркнуты */ a:visited {color: green; text-decoration: none;} /* у посещённых ссылок текст будет красным, убираем подчёркивание */
Псевдо-класс:lang() используется для задания разного стиля оформления в зависимости от языка. В скобочках указывается язык, к которому нужно применить оформление. Это можно использовать, например, для задания разных стилей кавычек в цитатах:
Q:lang(de) {quotes: "\201E" "\201C";} /* кавычки для немецкого языка */ q:lang(en) {quotes: "\201C" "\201D";} /* кавычки для английского языка */ q:lang(ru) {quotes: "\00AB" "\00BB";} /* кавычки для русского языка */
Это, пожалуй, единственный из всех возможных видов селекторов, который я никогда не использовал.
Динамические псевдо-классы
Динамические псевдо-классы – это:active, :hover, :focus. Динамические псевдо-классы срабатывают по определённому действию на странице, они работают для всех тегов, а не только для ссылок как многие думают и даже утверждают в своих блогах! Рассмотрим их применение:
P:active {background: red;} /* стиль, который применится к тегу по нажатию на него (клику мышью) */ input:focus {width: 400px;} /* стиль, который применится к элементу, на котором в данный момент фокус (работает, к примеру, для текстовых полей ввода: textarea, input). В данном случае по взятию в фокус, ширина input станет равна 400 пикселей, удобно использовать для красивого эффекта удлинения поля по клику. */ div:hover {background: green;} /* срабатывает по наведению курсора на элемент, в основном применяется для создания красивого эффекта при наведении на ссылки. */
Примените данные стили к нашему примеру выше, и вы сами всё увидите.
Смежные селекторы
Смежные селекторы – это ближайший сосед ниже по коду, не ребёнок! Очень удобный селектор:
текст в параграфе первого div
текст в параграфе ВНЕ div
текст в параграфе второго div
снова параграф вне div
Результат:
Обобщённые смежные селекторы
Обобщённые смежные селекторы действуют точно также как и обычные смежные селекторы, за исключением того, что свойства применяются не только к первому соседу ниже, а ко всем заданным соседям ниже:
параграф
параграф
параграф
текст в спане
параграф
параграф
параграф в диве
параграф в диве
текст в спане
параграф
Результат:
Селекторы атрибутов
Селекторы атрибутов позволяют нам обратиться к тегам, имеющим необходимый нам атрибут или даже конкретное его значение:
P {свойства} /* применить ко всем тегам p, у которых есть атрибут align */ p {свойства} /* где значение атрибута align равно center */ p {свойства} /* где значение атрибута align начинается на center */ p {свойства} /* где значение атрибута align содержит center */ p {свойства} /* где site может находиться среди других слов, отделенных пробелами () */ p {свойства} /* где значение атрибута class состоит только из слова site или начинается им, после чего ставится дефис и пишется остальная часть значения ( или ) */ p {свойства} /* где значение атрибута align заканчивается на center */
CSS 3 псевдо-классы
Вы уже ознакомились со всеми основными селекторами и вам на первых парах этого должно хватить с горкой. Однако в CSS 3 появилось множество новых псевдо-классов, теперь мы можем брать не только первого ребёнка, но и любого другого по счёту, можем идти от обратного, брать не первого, а последнего ребёнка и так далее и тому подобное. Всё это очень удобно и практично, разве что у вас могут возникнуть проблемы со старыми версиями IE. Давайте соберём все силы в кулак и пробежимся по всем оставшимся селекторам, чтобы потом уже вы могли иметь их ввиду при вёрстке собственного макета.
:last-child – аналог:first-child, только берёт не первого, а последнего ребёнка.
:only-child – сработает, если элемент (тег) является единственным ребёнком.
:only-of-type - сработает, если элемент (тег) является единственным ребёнком своего типа.
:nth-child() – обращается к потомкам по их порядковым номерам, можно обращаться ко всем чётным или нечётным (even или odd) числам. Например:
параграф
параграф
параграф
текст в спане
параграф
параграф
параграф
параграф
параграф
параграф
Результат:
:nth-last-child – работает также как и предыдущий, но отчёт начинается с конца.
:first-of-type – первый ребёнок своего типа в рамках прямого родителя.
:last-of-type – последний ребёнок своего типа в рамках прямого родителя.
:empty – сработает для тех тегов, внутри которых нет ни одного символа (без текста).
:not() – делает исключение для заданных элементов. Пример:
параграф с классом roll
параграф
параграф
параграф с классом roll
Результат:
Управление полями, формами, переключателями и флажками в CSS
:enabled - применяется к доступным элементам интерфейса как формы, кнопки, переключатели и тд. По умолчанию все элементы интерфейса являются доступными.
:disabled - применяется к заблокированным элементам интерфейса как кнопки, формы и так далее. Элементы интерфейса являются заблокированными, если к ним в HTML добавить атрибут disabled или в XHTML disabled=”disabled”.
:checked – применяется к элементам интерфейса типа флажки (radio) и переключатели (checkbox), когда они находятся во включённом положении.
Псевдо-элементы
Псевдо-элементы, аналогично псевдо-классам вычисляются браузером автоматически, нам об этом заботиться не нужно. Чтобы не путать псевдо-элементы с псевдо-классами в спецификации CSS 3 было решено использовать двойное двоеточие, вместо одинарного, как было в CSS 2. Поэтому в Интернете вы можете встретить псевдо-элементы как с одинарным двоеточием так и с двойным – и тот и тот вариант верен. Однако для лучшей совместимости с IE рекомендуют использовать одинарное двоеточие.
:first-line – первая строка внутри блочного или табличного элемента.
:first-letter – первая буква внутри блочного элемента.
Итоги: теперь вы знаете и можете использовать всю мощь каскадных таблиц стилей, однако это не значит, что нужно сразу ринуться верстать макеты сайтов, используя как можно больше изученных сегодня селекторов, псевдо-классов и псевдо-элементов. Я перечислил все возможные инструменты, а вы должны выбрать лишь самое нужное для себя.
Преимущества оптимизации HTML за счёт CSS
Суть всего написанного выше отчасти заключается в том, чтобы отказаться от повсеместного использования атрибутов class и id в HTML, тем самым возложив всё на плечи могучих таблиц стилей.
Внешние файлы стилей, как и внешние файлы Javascript отлично кэшируются, а это значит, что зайдя первый раз на любую страницу вашего сайта, браузер пользователя запоминает эти файлы и более их не скачивает, в отличие от самой страницы сайта, то есть вашей HTML разметки, картинок и текста, которую браузер загружает снова и снова. Тоже самое касается и поисковых систем, им вообще нет дела до ваших внешних файлов, но вот до объёма и содержания вашей HTML разметки им дело есть. Поисковым системам приходится сканировать всю структуру страницы и в ваших же интересах помочь им в этом, сосредоточить их усилия на контенте, а не на громоздкой стене разметки состоящей из кучи классов и идентификаторов или того хуже – Javascript обработчиков событий и CSS стилей прямо в атрибутах тегов (и такое до сих пор бывает).
Вы можете со мной поспорить, мол, мы можем заставить клиентский браузер скачивать себе в локальную среду все подключаемые файлы, картинки, закэшировать всю страницу целиком и так далее и тому подобное. На таком фоне подобная мелочь совсем теряется, но так или иначе максимально сократив HTML разметку, вы только выигрываете, при этом ничего не потеряв, кроме возможной привычки.
Подытожим: благодаря оптимизации и сокращению HTML мы имеем совсем небольшой выигрыш в скорости загрузки сайта и в SEO (поисковой оптимизации), а также более чистый код.
Что такое селектор в css – это описание того элемента или группы элементов, которое показывает браузеру какой элемент выбрать для применения к нему стиля. Давайте рассмотрим основные CSS селекторы.
1) .Х
.topic-title { background-color: yellow; }CSS селектор по классу Х . Разница между id и классом в том, что один и тот же класс может быть у нескольких элементов на странице, а id всегда уникален. Классы стоит использовать для применения одного и того же стиля к нескольким элементам.
- Chrome
- Firefox
- Safari
- Opera
2) #X
#content { width: 960px; margin: 0 auto; }CSS селектор по id . Знак решетки перед CSS селектором Х выбирает элемент у которого id = Х. Навешивая стили по id всегда стоит помнить, что он должен быть уникальным – только один такой id должен быть на странице. Поэтому лучше использовать селекторы по классам, комбинациям классов или названиям тэгов. Тем не менее, селекторы по id отлично применяются в автоматизированном тестировании, т.к. позволяют сразу взаимодействовать именно с нужным элементом и иметь уверенность что он только один такой на странице.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
3) *
* { margin: 0; padding: 0; }CSS селектор всех элементов . Символ звездочки выбирает все элементы которые есть на странице. Многие разработчики используют его для того, чтобы убрать (обнулить) значения отступов (margin и padding) у всех элементов страницы. Тем не менее, на практике лучше так не делать потому, что этот CSS селектор довольно сильно грузит браузер перебором всех элементов на странице.
Символ * также можно использовать чтобы выделить все дочерние элементы:
#header * { border: 5px solid grey; }
В этом примере выделяются все дочерние элементы (потомки) элемента с #header . Но всегда стоит помнить, что этот селектор достаточно тяжел для браузера.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
4) X
a { color: green; } ol { margin-left: 15px; }CSS селектор типа . Как выбрать все элементы одного типа, если у них нет ни id ни классов? Стоит использовать CSS селектор по типу элемента. К примеру, чтобы выбрать все упорядоченные списки на странице, используйте ol {...} как это показано выше.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
5) Х Y
li a { font-weight: bold; text-decoration: none; }CSS селектор потомков или CSS селектор дочерних элементов используется чаще всего. Его используют если необходимо выбрать элементы определенного типа из множества дочерних элементов. Например, нужно выделить все ссылки, которые находятся в элементе li. В этом случае используйте этот селектор. Используя цепочки таких селекторов, всегда спрашивайте себя, а можно ли для выделения данного элемента использовать еще более короткую последовательность селекторов.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
6) Х + Y
div + p { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 18px; }Смежный селектор элементов выбирает только элемент типа Y, который идет сразу после элемента Х. В этом случае каждый параграф следующий сразу после каждого элемента div будет получать специальный тип и размер шрифта.
- Какими браузерами поддерживается:
- IE7 +
- Firefox
- Chrome
- Safari
- Chrome
7) Х > Y
#content > ul { border: 1px solid green; }CSS селектор потомков . Разница между селекторами Х Y и X > Y в том, что рассматриваемый CSS селектор будет выбирать только непосредственные дочерние элементы (выберет только прямых потомков). К примеру:
- Элемент списка
- Потомок первого элемента списка
- Элемент списка
- Элемент списка
CSS селектор #content > ul выберет только ul, который является прямым потомком блока div с id="container" . Он не выберет ul, являющийся потомком первого li. Это достаточно выгодный по скорости работы CSS селектор.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
8) Х ~ Y
ol ~ p { margin-left: 10px; }Селектор сестринских (саблинговых) элементов менее строгий чем X + Y. Он выберет не только первый, но и все остальные элементы p, идущие за ol.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
Псевдо-класс:link используется для выбора всех ссылок, на которые еще не кликнули. Если же нужно применить определенный стиль к уже посещенным ссылкам, то для этого используется псевдо-класс:visited .
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
10) X
a { color: red; }CSS селектор по атрибуту . В этом примере выбираются только те ссылки, у которых есть атрибут title.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
11) X
a { color: yellow; }- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
12) X
a { color: #dfc11f; }Звездочка означает, что искомое значение должно быть где-нибудь в атрибуте (в любой части атрибута href). Таким образом, будут выбраны и ссылки с https://www..stijit.. Ко всем выбранным ссылкам будет применен золотой цвет.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
13) X
a { background: url(path/to/external/icon.png) no-repeat; padding-left: 15px; }На некоторых сайтах рядом со ссылками, ведущими на другие сайты, проставлены небольшие иконки со стрелочками, чтобы показать что это внешние ссылки. Карат “^” – это символ для обозначения начала строки. Таким образом для выбора всех тэгов, у которых href начинается с http, нужно использовать CSS селектор с каратом, как это показано на примере выше.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
14) X
a { color: green; }Здесь используется регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением.jpg.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
15) X
a { color: green; }Здесь мы применяем CSS селектор по пользовательскому атрибуту . Добавляем наш собственный атрибут data-filetype в каждую ссылку:
ссылка
Теперь, с помощью приведеного выше CSS селектора, можно выбирать все ссылки ведущие на картинки с любым расширением.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
16) X
Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных пробелом. Можно прописать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Таким образом можно указать, что ссылка является внешней и ведет на изображение.
ссылка
С помощью такого приема мы можем выбирать элементы с нужными нам комбинациями атрибутов:
/* Выбрать элемент, атрибут data-info которого содержит значение external */ a { color: green; } /* Выбрать элемент, атрибут data-info которого содержит значение image */ a { border: 2px dashed black; }
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
17) X:checked
input:checked { border: 3px outset black; }Этот псевдокласс выделяет только такие элементы, как checkbox или radio button, причем только когда они уже в отмеченном состоянии.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
18) X:after
Псевдоклассы:before и:after очень полезные – они создают контент до и после выбранного элемента.
Clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }
Здесь при помощи псевдо-класса:after после блока с классом.clearfix создается пустая строка, после чего очищается. Этот подход используется если невозможно применить свойство overflow: hidden .
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
19) X:hover
div:hover { background-color: rgba(11,77,130,0.5); }Применяет к элементу определенный стиль, когда на него наводится курсор мыши. Старые версии Internet Explorer применяют:hover только к ссылкам.
A:hover { border-bottom: 1px dotted blue; }
- Какими браузерами поддерживается:
- IE6+ (В IE6 применимо только к ссылкам)
- Chrome
- Firefox
- Safari
- Opera
20) X:not(selector)
div:not(#content) { color: grey; }Псевдокласс not (отрицания) бывает полезен когда, к примеру, нужно выбрать все div, за исключением того, который имеет id="content" .
По такому же принципу можно выбрать все элементы кроме p:
*:not(p) { color: blue; }
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
21) X::pseudoElement
p::first-line { font-weight: bold; font-size: 24px; }Псевдоэлементы могут использоваться для применения стилей к фрагментам элементов – к примеру к первой строке абзаца или первой букве в слове. Применимо только к блочным элементам.
Выбор первой буквы параграфа:
P::first-letter { font-family: cursive; font-size: 30px; font-weight: bold; padding-right: 1px; }
Выбор первой строки в параграфе:
P:first-line { font-size: 28px; font-weight: bold; }
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera
22) X:first-child
ul li:first-child { border-top: none; }Псевдокласс first-child выбирает только первого потомка родительского элемента. Часто используется чтобы убрать border в первом элементе списка. Этот псевдокласс был еще начиная с CSS 1 .
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari
- Opera 3.5+
- Android
23) X:last-child
ul > li:last-child { border-bottom: none; }Псевдокласс last-child выбирает последнего потомка родительского элемента. Он появился только начиная с CSS 3 .
- Какими браузерами поддерживается:
- IE9+ (IE8 поддерживает first-child, но не last-child. Microsoft (с))
- Chrome
- Firefox
- Safari
- Opera 9.6+
- Android
24) X:only-child
div p:only-child { color: green; }Псевдокласс only-child позволяет выбрать те элементы, которые являются единственными потомками для своих родителей.
- Какими браузерами поддерживается:
- Chrome
- Firefox
- Safari 3.0+
- Opera 9.6+
- Android
25) X:nth-child(n)
li:nth-child(3) { color: black; }Выбирает дочерний элемент по номеру, указанному в параметре. Селектор nth-child принимает целое число в качестве параметра, однако отсчет ведется c 1, т.е. если нужно выбрать второй пункт списка, используйте li:nth-child(2) . Все псевдоклассы с использованием nth-child появились только начиная с CSS 3 .
- Какими браузерами поддерживается:
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
26) X:nth-last-child(n)
li:nth-last-child(2) { color: red; }Если у вас большой список элементов в ul и нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(109) , можно использовать селектор последних потомков nth-last-child . Этот метод такой же как и предыдущий, но отсчет ведется с конца.
- Какими браузерами поддерживается:
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
27) X:nth-of-type(n)
ul:nth-of-type(3) { border: 1px dotted black; }Если на странице есть четыре неупорядоченных списка и нужно применить стиль только к третьему из них, не имеющему уникального id, стоит использовать nth-of-type.
- Какими браузерами поддерживается:
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
28) X:nth-last-of-type(n)
ul:nth-last-of-type(3) { border: 2px ridge blue; }Псевдокласс nth-last-of-type(n) предназначен для выбора n-ого элемента определенного типа с конца.
- Какими браузерами поддерживается:
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
29) X:only-of-type
li:only-of-type { font-weight: bold; }Псевдокласс only-of-type выбирает элементы, не имеющие соседей в пределах родительского элемента. К примеру можно выбирать все ul, которые содержат только одинокие li.
- Какими браузерами поддерживается:
- Chrome
- Firefox 3.5+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
30) X:first-of-type
ul:first-of-type > li:nth-child(3) { font-style: italic; }Псевдокласс first-of-type выбирает первый элемент заданного типа.
- Какими браузерами поддерживается:
- Chrome
- Firefox 3.5+
- Safari 3.1+
- Opera 9.5+
- Android 2.1+
- iOS 2.0+