CSS от А до Я как использовать псевдокласс enabled


Содержание материала:

CSS от А до Я: как использовать псевдокласс enabled

Псевдоклассы CSS основной применяют для прописывания или добавления спец эффектов к разным элементам. Для использования этих эффектов не нужно применять или использовать JavaScript, также разные скрипты. Здесь основной синтаксис псевдоклассов заключается в следующем. Класс CSS псевдо позволяет назначить определенное состояние к элементу. Например, пользователь наводит курсор на изображение на странице и переходит к другому изображению. Ссылки меняют цвета, как только они посещаются и их можно отличить от невидимых ссылок. Поле ввода в форме отключено и не принимает значения.

Эти действия и многое другое становятся возможными благодаря псевдоклассам. Обычные классы CSS также могут использоваться с псевдоклассами. CSS3 добавил несколько псевдо классов, чем было ранее доступно в CSS2. Псевдо-класс привязан к селектору. Ему предшествует двоеточие и обычно сопровождается свойством со значением в скобках. Синтаксис псевдо-класса выглядит следующим образом.

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

Псевдокласс :disabled

16.11.2015, 14:24

input[type=»submit»][disabled!=disabled]:hover
Здравствуйте. У меня для кнопок типа submit и button есть стили input, input, button < . >.

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

псевдокласс clear:both;
Немного не понимаю как работают псевдоклассы, никогда ранее не пользовался ими из за.

Псевдокласс :target
Доброго времени суток, уважаемые форумчане. У меня вопрос по псевдоклассу :target. Вот мой код на.

Псевдокласс :checked
Здравствуйте, помогите пожалуйста. Есть блок типа «Аккордеон» (вертикальные вкладки). HTML

CSS: Псевдоклассы

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

Простой синтаксис псевдоклассов выглядит следующим образом:

Классы CSS также могут использоваться с псевдоклассами:

Наиболее часто используемые CSS псевдоклассы:

Значение Описание
:link Класс открывавшейся ранее ссылки.
:visited Класс открытой ранее ссылки.
:hover Класс элемента, когда на него наведен курсор мыши.
:active Класс для активного элемента.
:focus Класс для элемента, который находится в фокусе.
:first-child Класс элемента, который является дочерним элементом другого.
:lang Класс, чтобы указать язык, применяемый для конкретного элемента.

При определении псевдоклассов CSS3 в блоке следует помнить:

  • a:hover должен располагаться после a:link и a:visited , иначе он не будет работать;
  • a:active должен располагаться после a:hover , иначе он не будет работать;
  • Имена псевдоклассов не чувствительны к регистру;
  • Псевдоклассы отличаются от классов CSS , но они могут быть объединены.

Псевдокласс :link

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

Этот код создает следующую черную ссылку:

Псевдокласс :visited

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

Этот код создает следующую ссылку. После того, как вы нажмете на нее, она изменит свой цвет на зеленый:

Псевдокласс :hover

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

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

Псевдокласс :active

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

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

Псевдокласс :focus

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

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

Псевдокласс :first-child

Псевдокласс child задается указанному элементу, который является дочерним элементом другого.

Чтобы :first-child работал в IE должен объявляться в верхней части документа.

Например, для создания отступа для первого абзаца всех элементов

Этот код дает следующий результат:

Псевдокласс :lang

Псевдокласс :lang позволяет составлять селекторы для отдельных тегов на основе настроек языка.

Этот класс полезен при создании документов, которые должны содержать текст на нескольких языках, имеющих различные конвенции для некоторых языковых конструкций. Например, во французском языке для обозначения цитаты, как правило, используются угловые скобки ( ), в то время как в английском языке используются одинарные кавычки (‘ and ‘).

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

надлежащим образом для каждого языка:

Селекторы :lang будут применяться ко всем элементам в документе. Но не все элементы используют свойство quotes , так что для большинства элементов эффект будет незаметен.

Этот код дает следующий результат:

Данная публикация представляет собой перевод статьи « CSS — Pseudo Classes » , подготовленной дружной командой проекта Интернет-технологии.ру

Псевдоклассы

На этой странице

Псевдокласс в CSS — которое определяет его особое состояние. Например, :hover может быть использован для изменения цвета кнопки при наведении курсора на неё.

Псевдоклассы дают возможность стилизовать элемент на основе не только отношений в DOM-дереве, но и основываясь на внешних факторах, таких как история посещений (например, :visited ), состояние содержимого (вроде ), checkbox ( ) или option ( внутри ), которые выбраны или включены. Пользователь может изменить это состояние, нажав на элемент, или выбрав другое значение, в этом случае :checked повторно не применится к элементу, а сохранится.’> :checked у некоторых элементов формы) или позиции курсора мыши (например, :hover определяет, находится ли курсор мыши над элементом).

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

Синтаксис

Как и с обычными классами, можно совмещать вместе в одном селекторе любое число псевдоклассов.

Блог Vaden Pro

Псевдоклассы CSS позволяют нам изменять оформление отдельных частей страницы в зависимости от изменения их состояния.

На практике это выглядит словно у элемента, при определенных условиях (к примеру при наведении мыши) появляется класс, который позволяет ему изменить свое оформление.

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

Не стоит путать селекторы псевдоклассов с селекторами псевдоэлементов.

Как пользоваться селекторами псевдоклассов CSS?

Основная задача селектора – выбор всех элементов из структуры документа подпадающих под определенные характеристики. В нашем случае состояние которых соответствует спецификации определенных псевдоклассов.

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

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

К примеру изменим размер шрифта первого элемента списка при наведении:

Подобные приемы в работе с CSS позволяют сократить html код и уменьшить время на верстку страницы в целом.

Классификация псевдоклассов CSS

Динамические псевдоклассы

  • :hover – выделяет элемент на который наведен курсор мыши.
  • :active – применяется для активного элемента. Активным считается элемент во время клика. Обычно используется для изменения цвета ссылки при клике по ней.
  • :focus – выделяет элемент на котором установлен фокус ( к примеру курсор в текстовом поле формы).

Псевдоклассы ссылок

  • :link – выделяет ссылки, которые еще не были посещены пользователем.
  • :visited – задает оформление ссылкам посещенным пользователем.

Псевдоклассы форм

  • :read-only – выделяет элемент формы у которого присутствует атрибут readonly (запрещает изменение или выбор данного элемента формы). Мы можем сделать такие поля к примеру полупрозрачными, чтобы у пользователей не возникало желания кликнуть на них.
  • :read-write – обратный :read-only селектор. Применится к элементам доступным для выбора и изменения.
  • :disabled – применяется для форматирования элементов форм с атрибутом disabled (запрещает нажатие, выделение и тд элементов формы). Схож с предыдущим классом.
  • :enabled – антипод :disabled. Выберет все доступные для воздействия элементы формы. По умолчанию доступны все элементы. Недоступными они становятся только после прописывания у них атрибута disabled.
  • ::-moz-placeholder – применяется к элементам формы с атрибутом placeholder. Работает в браузере firefox и позволяет изменять внешний вид текста (шрифт, цвет и тд)
  • ::-webkit-input-placeholder – аналогичен предыдущему псевдоклассу, только на этот раз работает в crome и safari.
  • :checked – применяется к полям типа checkbox (переключателям) и radio (флажкам) для обозначения их включенного состояния.
  • :indeterminate – псевдокласс обратный :checked. Оформляет флажки и переключатели в неактивном состоянии.
  • :required — выберет элементы с атрибутом required (делает поле обязательным для заполнения перед отправкой формы)
  • :optional – обратный :required селектор. Выберет все элементы не обязательные для заполнения.
  • :root – выбирает корневой тег документа. Соответствует тегу html.
  • :val > span > span > — пустой элемент, а span > span > [ / code ] ] , [ [ code ] ] span >& nbsp ; span > и тд уже нет.
  • :lang(язык) – выбирает элементы по языку используемому в них. Использутеся для создания различий при выводе различных языков в документе. Как пример- разных кавычек в текстах на разных языках.Язык задается в виде аббревиатуры из английских букв (по типуru, en, fr, it). Источником информации о языке служат метатег content-language и атрибут lang.
  • :not(селектор) — задает оформление для всех элементов не содержащих определенный селектор.
  • :target – изменит оформление идентификатора заданного в адресной строке браузера (происходит при переходе по ссылке с якорем в документе по примеру http://ваш_сайт/#target)

Подводя итоги

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

Псевдоклассы CSS

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

Внешний вид элементов изменяется с помощью селекторов. Но что если вам необходимо в таблице изменить все четные строки. То есть добавить цветную заливку или изменить в них цвет текста. Можно прописать класс для каждой четной строки вручную, но это займет время и увеличит размер страницы. Простым решением будет использовать псевдокласс :nth-child(even) для селектора tr.

color:green;

Этот код сделает цвет текста во всех четных строках таблицы на зеленый.

Кроме этого в процессе взаимодействия пользователя со страницей возникают динамические состояния. К примеру когда посетитель наводит указатель мыши на элемент Ссылка возникает его динамическое состояние a:hover. А когда пользователь нажимает на элемент то возникает динамическое состояние a:visited.

Псевдоклассы CSS бывают следующих видов:

  1. Динамические.
  2. Псевдоклассы пользовательского интерфейса.
  3. Структурные псевдоклассы.
  4. Целевой псевдокласс :target.
  5. Языковой псевдокласс :lang().
  6. Псевдокласс отрицания :not().
  7. Комбинация псевдоклассов.
Динамические псевдоклассы

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

:link — Стиль применяется к непосещенным ссылка;

:visited — Стиль применяется к ссылке которую вы уже посетили на странице;

:focus — Применение стиля к ссылкам, или элементам, которые были активированы курсором или же с помощью клавиатуры (клавишой TAB). Чаще всего используется для элементов форм;

:hover — используется для применения стилей к элементами на которые наведен курсор мыши;

:active — выбирается элемент страницы на который было произведено нажатие мыши. Применяется как к ссылкам так и другим элементам веб страницы.

Псевдоклассы CSS для пользовательского интерфейса

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

:disabled — стили для заблокированных к изменению элементов форм;

:enabled — противоположный предыдущему, применяет стили к не заблокированным элементам формы;

:checked — стилизация таких элементов как: , , а также элементов , находящихся внутри элемента ;

:indeterminate — применяется к элементам формы таким как радио и чекбокс. Такие элементы формы могут находиться в неопределенном состоянии. Именно к таким и применяются стили.

Структурные псевдоклассы CSS

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

:root — выбор элемента, который является корневым в документе;

:nth-child() — элементы на основе их индекса (в порядке очереди) внутри их родительского контейнера. Варианты:
li:nth-child(even) — каждый элемент списка с индексом 2, 4, 6, 8, и т.д.
li:nth-child(odd) — каждый элемент списка с индексом 1, 3, 5, 7, и т.д.
li:nth-child(3) — только элемент с индексом 3.
li:nth-child(an+b) — например, li:nth-child(3n+1) выберет первый (3*0 +1 = 1), четвёртый (3*1 +1 = 4), седьмой (3*2 +1 = 7) элементы и т.д., причём значение b может быть равно нулю;

:nth-last-child() — дочерние элементы на основе их индекса внутри контейнера, при этом отсчёт идёт в обратном порядке, т.е. начиная с последнего элемента. Значениями аргумента могут быть положительные, отрицательные значения, а также ключевые слова even odd ;

:nth-of-type() — элементы одного типа на основе их индекса внутри контейнера, например, img:nth-of-type(2n) установит обтекание по левому краю каждой четной картинке, при условии, что они каждая из них не обёрнута другим блоком;

:nth-last-of-type() — элементы одного типа на основе их индекса внутри контейнера, начиная с последнего элемента к первому;

:first-child — элемент, который является первым дочерним элементом некоторого другого элемента;

:last-child — последний дочерний элемент элемента-контейнера;

:first-of-type — первый элемент данного типа среди дочерних элементов родительского элемента-контейнера;

:last-of-type — последний элемент данного типа среди дочерних элементов родительского элемента-контейнера;

:only-child — дочерний элемент, который является единственным дочерним элементов. Работает аналогично с :first-child:last-child или :nth-child(1):nth-last-child(1) , но с меньшей специфичностью;

:only-of-type — элемент, который является единственным элементом данного типа в родительском элементе;

:empty — элемент, который не содержит ни одного дочернего элемента.

Целевой псевдокласс

Некоторые ссылки указывают на местоположение внутри ресурса. Этот тип ссылок заканчивается символом «решетка» # , за которым следует идентификатор якоря (так называемый идентификатор фрагмента), например https://web-legko.ru/css3/#content . Элемент с идентификатором фрагмента называется целевым элементом. С помощью данного псевдокласса можно стилизовать элемент, к которому перешли по ссылке на странице (навигация по странице), а также элементы, которые расположены в одном блоке и при нажатии на кнопку/ссылку сменяются/перемещаются (например, css-слайдер).

В данном примере каждой картинке задан id , а каждой ссылке — соответствующий идентификатор якоря. При нажатии на ссылку каждая картинка увеличивается до стопроцентного размера.

Языковой псевдокласс

Данный псевдокласс используется когда в документе содержатся абзацы текста на разных языках. Чтобы браузер различал их, элементу с текстом добавляется атрибут lang с кодом языка, например, lang=»fr» . В результате чего этот элемент может быть стилизован при помощи селектора p:lang(fr) .

Псевдокласс отрицания

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

  • элемента, например, body :not(strong)
  • класса и идентификатора, например, p:not(.text)
  • псевдокласса, например, ul:not(:first-child)
  • атрибута, например, input:not([type=»checkbox»])
Комбинации псевдоклассов

При стилизации элементов возможна комбинация псевдоклассов CSS, например:

tr:nth-last-child(even):hover — добавит стили при наведении каждой чётной строке таблицы (отсчёт в обратном порядке);

h2:not(:first-of-type):not(:last-of-type) — добавит стили для всех элементов данного типа, кроме первого и последнего элемента данного типа.

Должен ли я использовать CSS: отключенный псевдокласс или [отключенный] селектор атрибутов или это вопрос мнения?

Я пытаюсь стилизовать отключенный ввод. Я могу использовать:

Является ли атрибут селектором современного способа CSS3 и способ продвижения вперед? Раньше я использовал псевдокласс, но я не могу найти информацию о том, являются ли они старым способом и не будут поддерживаться, или оба они равны, и вы можете использовать все, что вам больше нравится.

Мне не нужно поддерживать старые браузеры (это приложение для интрасети), так оно и есть:

  • Атрибут
  • является более новым и лучшим
  • pseudo-class по-прежнему остается в пути
  • в зависимости от того, что вам больше нравится
  • есть техническая причина использовать один над другим

Является ли атрибут селектором современного CSS3-способа и способ продвижения вперед?

Нет; на самом деле, селектора атрибутов были вокруг с CSS2, а сам атрибут disabled существовал с HTML 4. Насколько мне известно, псевдокласс класса :disabled был представлен в Селекторах 3, что делает псевдокласс более новым.

  • есть техническая причина использовать один над другим

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

С помощью селектора атрибутов вы полагаетесь на знание того, что в стиле документа вы используете атрибут disabled для указания отключенных полей. Теоретически, если вы разрабатывали что-то, что не было HTML, отключенные поля могут не отображаться с использованием атрибута disabled , например. это может быть enabled=»false» или что-то в этом роде. Даже будущие выпуски HTML могут вводить новые элементы, которые используют разные атрибуты для представления состояния с включенным/отключенным; эти элементы не будут соответствовать селектору атрибутов [disabled] .

Псевдокласс :disabled отделяет селектор от документа, с которым вы работаете. Спецификация просто заявляет, что она нацелена на элементы, которые отключены, и что включен ли элемент, отключен или нет, определяемый языком документа:

Что представляет собой включенное состояние, отключенное состояние, а элемент пользовательского интерфейса зависит от языка. В типичном документе большинство элементов не будут ни :enabled , ни :disabled .

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

В терминах DOM я считаю, что установка свойства disabled в элементе DOM также изменяет атрибут HTML disabled , что означает отсутствие различий между селектором с манипуляцией DOM. Я не уверен, что это зависит от браузера, но здесь скрипка, которая демонстрирует ее в последних версиях всех основных браузеров:

Скорее всего, вы будете разрабатывать HTML-код, поэтому ничто из этого не может повлиять на вас, но если совместимость с браузером не является проблемой, я бы выбрал :enabled и :disabled над :not([disabled]) и [disabled] просто потому, что псевдоклассы переносят семантику, которой нет в селекторе атрибутов. Я такой пурист.

Псевдоклассы и псевдоэлементы в CSS (hover, before, first-child и другие)

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

Псевдоэлементы

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

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

Вначале следует имя основного селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента.

Далее рассмотрим некоторые псевдоэлементы и их свойства.

:first-letter

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

Рассмотрим применение first-letter на примере создание выступающего инициала:

И результат примера:

Как видно на скриншоте, первая буква абзаца стала в два раза больше и изменила цвет на красный.

:first-line

Псевдоэлемент :first-line привязывает стиль к первой строке текста в элементе веб страницы. Посмотрим действие псевдоэлемента :first-line на абзац текста:

:after и :before

Псевдоэлементы after и before применяется для вставки контента после и перед содержимым элемента. Эти псевдоэлементы работают совместно со стилевым свойством content, которое определяет содержимое для вставки.

Как видим в конце каждого абзаца вставлен текст «webcodius.ru», как и прописано в css правиле в свойстве «content». Если в место «after» поставить «before», то текст вставиться в начале абзаца.

Псевдоклассы

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

При описании css правил псевдоклассы обычно используют в совокупности с основными селекторами:

Если псевдокласс указывается без селектора впереди (:hover), то он применяется ко всем элементам страницы.

Псевдоклассы условно делятся на три группы:

  • определяющие состояние элементов;
  • имеющие отношение к дереву элементов;
  • указывающие язык текста.

Псевдоклассы, определяющие состояние элементов

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

Псевдокласс :link применяется для не посещенных ссылок, т.е. ссылкам, на которые пользователь еще не нажимал. Записи a <. >и a:link <. >в таблице стилей дают одинаковый результат, поэтому псевдокласс :link можно не указывать.

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

Псевдокласс :active применяется к активным элементам. Например, для активации ссылки, необходимо навести на нее курсор и щелкнуть мышкой.

Псевдокласс :focus применяется к элементу при получении фокуса. Например, поле текстового ввода получает фокус, когда в него установлен курсор.

И последний псевдокласс :hоvеr применяется к элементу, когда на него наведен курсор мыши, но щелчка не происходит.

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

Псевдоклассы структуры документа

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

Первыми рассмотрим псевдоклассы :first-child и :last-child, которые привязывают стиль к элементам селектора, которые являются соответственно первым и последним дочерним элементом своего родителя. Чтобы стало понятней рассмотрим эти псевдоклассы на примере маркированного списка:

В этом примере с помощью правила CSS «li:first-child» мы говорим браузеру, что стиль необходимо применить к элементу li, который идет первым в своем родительском элементе. А с помощью селектора «li:last-child» элемент должен быть последним. Таким образом, с помощью свойств css для настроек отображения шрифтов, мы указали, что первый элемент списка должен быть выделен жирным шрифтом, а у последнего элемента установили шрифт красного цвета.

Следующий псевдокласс :only-of-type, который применяется к дочернему элементу указанного типа, только если он единственный у своего родителя.

В примере псевдокласс : only-of-type применяется к элементу , в правилах стиля которого размер шрифта увеличивается в два раза. Размер шрифта увеличивается только у тех гиперссылок, которые у своих родителей (в данном случае это тег

) встречаются только один раз.

Псевдокласс :nth-child позволяет привязать стиль к элементам Web-страницы, на основе их нумерации в дереве элементов:

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

  • odd — стиль будет привязан ко всем нечетным элементам удовлетворяющих значению ;
  • even — означает все четные элементы;
  • число — обозначает порядковый номер дочернего элемента относительно своего родителя (нумерация начинается с 1 — обозначает первый элемент);
  • выражение — задается в виде формулы an+b, где a и b целые числа, а n счетчик, который принимает значения 0, 1, 2.

Например, как выделить все четные строки таблицы цветом? В этом случае идеально поможет псевдокласс :nth-child:

В коде примера запись tr:nth-child (2n) означает, что стиль необходимо привязать ко всем элементам tr, с помощью которых формируются строки таблицы (об этом мы говорили в статье как вставить таблицу на html-странице). Причем порядковый номер строк относительно родительского элемента table должен удовлетворять формуле 2n, в которую браузер вместо n подставляет целые числа 0, 1, 2. В итоге получается, что стиль применяется к строкам под номерами 2, 4, 6 и т.д.

Псевдоклассы :not и *

Осталось рассмотреть еще два важных псевдокласса. Особый псевдокласс :not позволяет привязать стиль к любому элементу web страницы, не удовлетворяющему заданным условиям. Таким условием может быть любой селектор:

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

В результате этого css правила, текст всех заголовков h1 окрасятся в красный цвет, кроме того у которого атрибут id будет равен main.

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

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

На этом все, до новых встреч на страницах блога!

CSS, псевдокласс, псевдоэлемент: hover, child, target

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

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

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

:nth-of-type

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

Сейчас все делается проще. Используйте псевдокласс CSS :nth-of-type. Это даст возможность получить необходимый визуальный эффект, ничего не меняя в разметке. Принцип действия прост: вы указываете селектор, а в скобках после его названия пишете формулу или ключевое слово, которые будут находить требуемые элементы. Например, :nth-of-type(even) найдет все четные элементы, а :nth-of-type(odd) – нечетные. Существует большое количество формул, которые используются для максимально точного контроля. В скобках можно указать число – в таком случае стили будут применяться к элементу, индекс которого равен этому числу.

:nth-child

Этот псевдокласс CSS по принципу действия схож с предыдущим, но в отличие от него работает исключительно с дочерними элементами выбранного элемента. Например, если вы хотите с его помощью настроить внешний вид тегов
в списке, нужно использовать конструкцию ul:nth-child, поскольку

    является родителем
    .

Для точного контроля можно использовать формулы. Они довольно сложны для новичка, но стоит немного углубиться в синтаксис, как все становится проще. Формулы выглядят так: an+b, где а – это множитель, а b – смещение. Например, если в скобках указать n, то псевдокласс выберет все дочерние элементы (потому что не указаны дополнительные условия в виде а и b). Если указать n+2, будут выбраны все элементы, кроме первого (потому что смещение равно двум). Лучше всего этот момент изучать на практике. Поэкспериментируйте с дочерними компонентами и разными формулами.

:last-child

Тут все просто. Псевдоклассы CSS child используются для выбора одного конкретного элемента. Этот выбирает последний дочерний компонент родителя. Используется довольно часто, например, чтобы выделить последнюю строку таблицы или убрать отступ у последнего блока, чтобы избежать его переноса на следующую строку.

:nth-last-child

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

Вы можете подумать, что эти псевдоклассы и псевдоэлементы CSS бесполезны, поскольку добиться цели можно также с помощью обычных классов. Это не так. :nth-child, :nth-last-child и их аналоги очень удобны при работе на больших проектах – например, в случаях, когда у блока имеется огромное количество дочерних элементов. Вручную расставлять классы долго и трудно.

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

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

Это псевдокласс ссылок CSS, причем не любых, а только тех, что еще не посещались. В нем можно задать стили для тех элементов , по которым пользователь пока не переходил.

:visited

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

Псевдокласс :target CSS

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

Допустим, у нас на странице есть 3 блока div с определенными id: id1, id2, id3. Также у нас есть три ссылки с соответствующими значениями href: #id1, #id2, #id3. При нажатии на первую ссылку в строке адреса страницы после ссылки на саму страницу появится соответствующий id.

В CSS для всех блоков div указано свойство display:none, то есть по умолчанию они не показываются. Используем target:div и задаем ему свойство display:block. Теперь, при нажатии по ссылкам с определенными href, блокам с соответствующими >

Все еще ничего не понятно? Попробуйте поэкспериментировать. Создайте страницу с описанной выше разметкой и стилями. Через пару минут вы отлично во всем разберетесь.

Псевдоклассы, которые могут применяться к любым элементам

Большинство описанных выше псевдоклассов требовало ссылок для работы. Однако не всем нужны элементы . Ряд вариантов может применяться к абсолютно любым частям страницы.

  • :active предназначен для стилизации элементов, по которым пользователь кликнул левой кнопкой мыши;
  • :hover – CSS для элементов, на которые пользователь наводит курсор;
  • :focus – для тех частей страницы, которые сейчас находятся в фокусе. Этот псевдокласс часто используется для работы с формами. Например, если вы хотите выделить строку ввода имени пользователя, когда посетитель устанавливает в нее курсор и начинает набирать символы.

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

Разумеется, псевдоклассы полностью поддерживаются только современными браузерами. Например, в IE6 и 7 не удастся использовать focus, а hover и active в IE6 работают только для ссылок. Будем надеяться, что вам не придется работать с такими браузерами, а если все же необходимость возникла, применяйте условные комментарии.

Дополнительные псевдоклассы

Перечисленными выше вариантами список не ограничивается. Благодаря современному CSS можно выделять только включенные элементы (:enabled) или только выключенные (:disabled), только отмеченные переключатели checkbox и radio (:checked). Вкратце опишем еще несколько вариантов, которые вы можете использовать для более тщательного управления внешним видом содержимого.

  • :only-child — ает возможность применять стиль к элементу, который является единственным дочерним элементом;
  • :lang — для работы с элементами, у которых задан язык с помощью атрибута lang;
  • :root — используется для выбора корневого элемента. Соответственно, в HTML таковым является тег ;
  • :not — очень мощный инструмент. Дает возможность ограничивать применение стилей по определенным селекторам. Вот пример: .blue-color:not(span). Такой селектор применит стили ко всем элементам с классом blue-color, если они не являются .

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

Псевдоклассы и псевдоэлементы для оформления элементов форм

Псевдоэлемент ::placeholder

Псевдоэлемент ::placeholder позволит вам оформить внешний вид текста, который выводится с помощью атрибута placeholder для любого текстового поля формы. Как правило, используются теги атрибутом type=»text» или «email» , но также их часто можно встретить в полях типа «url» или «search» :

Для того чтобы стилизовать псевдоэлемент ::placeholder пока еще необходимо использовать вендорные префиксы для разных браузеров:

Поддержку этого псевдоэлемента можно посмотреть на сайте caniuse.com

Пример ниже показывает, как можно изменить цвет шрифта во всех полях формы.

В примере поле с type=»search» имеет другой цвет текста в placeholder . Чтобы изменить цвет для определенного типа поля, необходимо записать стили этого псевдоэлемента так:

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

Если рассмотреть синтаксис чуть пристальней, то мы увидим, что часть браузеров использует псевдоэлемент ::placeholder с двумя двоеточиями, а другая часть — псевдокласс :placeholder с одним двоеточием перед названием.

Важный момент: в css-правилах вы можете использовать не все свойства, а только те, что перечислены ниже:

  • color
  • font и все связанные свойства ( font-size , font-family и т.д.)
  • text-decoration
  • text-indent
  • text-overflow
  • text-transform
  • line-height
  • word-spacing
  • letter-spacing
  • background и все связанные свойства ( background-color , background-image и т.д.)
  • opacity
  • vertical-align

В основном, это свойства, так или иначе связанные с форматированием текста.

Псевдокласс :placeholder-shown

Кроме псевдоэлемента ::placeholder в стандарте CSS существует еще псевдокласс :placeholder-shown , посмотреть поддержку которого можно также на сайте caniuse.com.

Отличие :placeholder-shown от ::placeholder заключается в том, что оформление с помощью :placeholder-shown работает только тогда, когда в полях input и textarea виден текст заполнителя, т.е. значение атрибута placeholder. Когда пользователь начинает вводить текст, это оформление меняется на стандартное или описанное в стилях для данной страницы/сайта.

Топ-пост этого месяца:  Как быстро запустить рекламу в соцсетях пошаговый гайд с примерами
Добавить комментарий