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

Дочерние селекторы CSS

В предыдущей статье мы рассказывали о родственных связях между элементами HTML-документа, в том числе и о дочерних элементах. Давайте посмотрим на примере, как эти связи можно использовать в CSS.

Представьте, что вам нужно присвоить стиль только тем тегам

, которые являются дочерними по отношению к , не затрагивая остальные

, дочерние по отношению к

Обратите внимание на символ > после body. С помощью него вы указываете, что стиль применяется исключительно для дочерних тегов. родителя

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

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

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

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

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

• :first-child – с помощью этого псевдокласса можно применить стиль к указанному элементу веб-страницы, при условии, что он является первым дочерним элементом своего родителя;
• :last-child – стиль применяется к указанному элементу веб-страницы при условии, что он является последним дочерним элементом своего родителя;
• :nth-child – позволяет выбрать четные (even) и нечетные (odd) дочерние элементы; также с помощью данного псевдокласса можно стилизовать чередующиеся дочерние элементы, используя выражения вида an+b и числа;
• :only-child – применяется к дочернему элементу при условии, что тот является единственным ребенком у родителя;
• :first-of-type – стиль применяется к первому элементу указанного типа (даже если этот элемент не является первым дочерним для своего родителя и над ним находятся другие дочерние элементы других типов);
• :last-of-type – работает точно так же, как и предыдущий псевдокласс, с той лишь разницей, что стиль применяется к последнему элементу указанного типа;
• :nth-of-type – по принципу работы похож на :nth-child , но ориентируется на тип элемента;
• :only-of-type – применяется к дочернему элементу указанного типа при условии, что тот является у родителя единственным ребенком своего типа.

Пример использования :first-child, :last-child и :nth-child

Скриншот: применение :first-child, :last-child и :nth-child

Мы написали CSS стиль для дочерних элементов простого HTML-документа, где тег

,

Первое правило – p:first-child – касается элемента p : если он является первым дочерним элементом своего родителя, то к нему применяется стиль (в нашем случае это жирный шрифт и преобразование текста в верхний регистр). Если в данный HTML-код сразу после открывающего тега

СписокСкопировать ссылку

Я рассказал о достоинствах списков в книге «Inclusive Design Patterns». Вместе с заголовками, списки помогают придавать страницам структуру. Без заголовков или списков страницы пустые и однообразные. Это делает их сложными как для визуального восприятия, так и для любого другого.

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

Список дел, как следует из названия — это список. В этом случае подходит неупорядоченный список, так как он не содержит никаких сведений о приоритетности пунктов. Вот разметка нашего списка задач (добавления, удаления и выбора чекбоксов пока нет):

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

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

Им не знаком ваш интерфейс — если не вести таких пользователей осторожно за руку, эта неизвестность может их оттолкнуть

Благодаря нашему заголовку и кнопке «Добавить» некоторым пользователям может быть сразу понятно, что нужно делать, даже без примеров или инструкций. Но интерфейс может быть менее знакомым и более сложным, чем этот простой список дел, поэтому давайте всё равно добавим пустое состояние — для тренировки.

Отображение пустого состоянияСкопировать ссылку

Конечно, можно использовать наши данные, чтобы определить, должно ли быть показано пустое состояние. Во Vue.js мы можем использовать :

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

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

Все псевдоклассы относятся к неявным состояниям. Псевдокласс означает, что у элемента пустое состояние. значит, что элемент отмечен. означает, что он находится в начале набора. Чем больше вы их используете, тем меньше потребуется манипулировать DOM через JavaScript для добавления и изменения состояния.

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

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

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

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

Псевдокласс hover используется для указания стиля элемента, на котором расположен указатель мыши. Чаще всего они используются гиперссылками:

Эта команда CSS превратит любую гиперссылку в красную, когда на нее наведен указатель мыши.

Псевдокласс hover может использоваться и для других элементов. Например, раскрывающиеся меню и их производных. Когда указано главное меню, стиль наведения активируется, и в результате отображается подменю. Более ранние версии Internet Explorer поддерживают псевдокласс hover только для гиперссылок, но существуют способы обойти эти ограничения.

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

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

Если вы используете комбинацию псевдоклассов гиперссылок, при их объявлении вы должны вы должны соблюдать порядок link — visited — hover — active. В противном случае, стиль не будет выполнен.

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

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

Вот немного более сложный пример выделения первой гиперссылки в каждом абзаце:

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

Псевдокласс focus позволяет вам применять стиль к вводу с клавиатуры. Стиль становится активным, когда элемент находится в фокусе. Один общий пример — установить цвет фона (например, розовый) или рамку для поля ввода:

Читайте далее: CSS уроки, 3 часть: CSS шрифт, текст, списки

Post Views:
4 087

Общие смежные селекторы

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

Селектор в приведенном ниже примере выберет все элементы , которым предшествует элемент , где все элементы имеют одного и того же родителя в дереве документа.

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

Есть более сложные селекторы, такие как селекторы атрибутов, псевдоклассы, псевдоэлементы. Мы подробно обсудим эти селекторы в следующих главах.

Базовые селекторы

К базовым селекторам можно отнести селектор по классу, тегу, идентификатору, атрибуту и универсальный селектор.

Селектор по элементу (тегу)

Селектор по элементу предназначен для выбора элементов по имени тега.

Пример задания правила для всех элементов p на странице:

Селектор по классу

Селектор по классу предназначен для выбора элементов по классу (значению атрибута class ).

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

Селектор по идентификатору (id)

Селектор по идентификатору предназначен для выбора элемента по идентификатору (значению атрибута id ).

Пример задания правила для элемента, имеющего в качестве значения атрибута id значение footer :

Универсальный селектор

Универсальный селектор (селектор звёздочка) предназначен для выбора всех элементов.

Пример задания правила для всех элементов на странице:

CSS селекторы по атрибуту

Селекторы по атрибуту предназначены для выбора элементов по имени атрибута и (или) его значению.

Типы селекторов по атрибуту:

• – по имени атрибута;
• – по имени и значению атрибута;
• – по имени и значению, с которого оно должно начинаться;
• – по имени атрибута и его значению, которое равно value или начинается со value- ;
• – по имени атрибута и значению, на которое оно должно заканчиваться;
• – по указанному атрибуту и значению, которое должно содержать value ;
• [attr

=value] – по имени атрибута и значению, которое содержит value отделённое от других с помощью пробела.

Пример задания правила для всех элементов на странице, имеющих атрибут target :

Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого равно test или начинается с test- (т.е. с обязательным дефисом, после которого идёт остальное содержимое значения):

Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого заканчивается на color :

Пример задания правила для всех элементов на странице, имеющих атрибут href , значение которого содержит подстроку youtu.be (например будет выбран элемент, если атрибут href у него равен https://www.youtube.com/watch?v=TEOSuiNfUMA ):

Пример задания правила для всех элементов на странице, имеющих атрибут data-content , значение которого содержит news , отделённое от других с помощью пробела (например будет выбран элемент, если у него атрибут data-content равен hot-news news news-football ):

27 ответов

В настоящее время нет способа выбрать родительский элемент элемента в CSS.

Если бы был способ сделать это, это было бы в любой из текущих спецификаций селекторов CSS:

Тем временем, вам придется прибегнуть к JavaScript, если вам нужно выбрать родительский элемент.

Рабочий блок для выбора уровня 4 включает псевдокласс класса :has() , который работает аналогично реализации jQuery . По состоянию на 2018 год это все равно не поддерживается никаким браузером .

Используя :has() , исходный вопрос можно было бы решить с помощью этого:

Как уже упоминалось в парах других, нет способа стилизовать родительский элемент элемента, используя только CSS, но следующее работает с jQuery :

Короткий ответ НЕТ, у нас на этом этапе в CSS нет parent selector , но если вы все равно не хотите менять элементы или классы, второй вариант использует JavaScript, что-то вроде этого:

или более короткий путь, если вы используете jQuery в своем приложении:

Вы можете попытаться использовать гиперссылку в качестве родителя, а затем изменить внутренние элементы при наведении. Например:

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

Селектор CSS « General Sibling Combinator » может быть использован для того, что вы хотите:

Это соответствует любому элементу F , которому предшествует E ].

Я знаю, что OP искал решение для CSS, но его легко достичь с помощью jQuery. В моем случае мне нужно было найти родительский тег

• для тега , содержащегося в дочернем
  . В jQuery есть селектор :has , поэтому можно определить родителя с помощью его дочерних элементов:

выберет элемент ul , у которого есть дочерний элемент с id someId . Или, чтобы ответить на исходный вопрос, что-то вроде следующего должно сделать трюк (непроверенный):

По крайней мере, вплоть до CSS3, включая CSS3, вы не можете выбрать это

Но это может быть сделано довольно легко в настоящее время в JS, вам просто нужно добавить немного ванильного JavaScript, обратите внимание, что код довольно короткий

Это наиболее обсуждаемый аспект спецификации Selectors Level 4. С помощью этого селектора вы сможете стилизовать элемент в соответствии с его дочерним элементом, используя восклицательный знак после данного селектора (!).

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

Но нам нужно ждать реализации браузеров: (

В css3 добавлен новый селектор, поэтому, если html выглядит так:

Фактически вы можете воздействовать на родителя элемента «a», который является «li» «

Нет, вы не можете выбрать родителя только в css.

Но поскольку у вас уже есть класс .active , не было бы легче перенести этот класс на li (вместо этого из a )? Таким образом, вы можете получить доступ только к li и a только через css.

Попробуйте переключить отображение a на block , а затем используйте любой желаемый стиль. Элемент a заполнит элемент li , и вы сможете изменить его внешний вид по своему желанию. Не забудьте установить li дополнение на 0.

Кто-нибудь предложил что-то подобное? Просто идея для горизонтального меню .

Другой пример , как использовать его с текстовыми вводами — выберите родительский набор полей

Я не думаю, что вы можете выбрать родителя только в css.

Но поскольку у вас уже есть класс .active , не было бы легче перенести этот класс на li (вместо a )? Таким образом, вы можете получить доступ только к li и a только через css.

Вот взломать с помощью pointer-events с hover :

Насколько мне известно, не в CSS 2. CSS 3 имеет более надежные селектор, но не всегда реализуется во всех браузерах. Даже с улучшенными селекторами я не верю, что он выполнит именно то, что вы указали в своем примере.

Существует плагин, который расширяет CSS, чтобы включить некоторые нестандартные функции, которые действительно могут помочь при разработке веб-сайтов. Он называется EQCSS .

Одна из вещей, которые добавляет EQCSS, является родительским селектором. Он работает во всех браузерах IE8 и выше. Вот формат:

Итак, здесь мы открыли запрос элемента для каждого элемента a.active , а для стилей внутри этого запроса такие вещи, как $parent , имеют смысл, потому что есть контрольная точка , Браузер может найти родителя, потому что он очень похож на parentNode в JavaScript.

EQCSS также включает в себя метаселектора $prev для элемента перед выбранным элементом, $this только для тех элементов, которые соответствуют запросу элемента, и многое другое.

Вы можете использовать этот скрипт .

Это позволит выбрать любого родителя текстового ввода. Но подождите, еще многое. Если вы хотите, вы можете выбрать указанного родителя:

или выбрать его, когда он активен:

Посмотрите этот HTML:

вы можете выбрать span.help , когда активен input и показать его:

Есть еще много возможностей; просто проверьте документацию плагина.

Селекторы атрибутов и их значений

• Синтаксис:

  атрибут { Описание правил стиля }
  Селекторатрибут { Описание правил стиля }

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

• Также же можно привязаться к значению атрибута и использовать «=» «~=».

  arel~="copyright" { ... }
  ahref="http://www.w3.org/" { ... }

• Найти символы, которые могут стоять в любом месте значения этого атрибута (например, атрибуа title)

  title*="Вася"{font-size3em;color red;}

• На странице собраны ссылки на файлы. Нужно выбрать только файлы с расширением pdf:

  href$="pdf"{
  	padding 5px  20px;
  	backgroundurl(icon.png) no-repeat -32px ;
  }

• Mozilla Селекторы атрибутов

Универсальный селектор

Универсальный селектор, обозначенный звездочкой (), выбирает все элементы на странице.

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

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

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

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

Базовые селекторы

К базовым селекторам можно отнести селектор по классу, тегу, идентификатору, атрибуту и универсальный селектор.

Селектор по элементу (тегу)

Селектор по элементу предназначен для выбора элементов по имени тега.

Синтаксис: имяТега

Пример задания правила для всех элементов на странице:

/* селектор p выберет все элементы p на странице */
p {
  padding-bottom: 15px;
}

Селектор по классу

Селектор по классу предназначен для выбора элементов по классу (значению атрибута ).

Синтаксис: .имяКласса

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

/* селектор .center выберет все элементы, имеющие класс center */
.center {
  text-align: center;
}

Селектор по идентификатору (id)

Селектор по идентификатору предназначен для выбора элемента по идентификатору (значению атрибута ).

Синтаксис: #имяИдентификатора

Пример задания правила для элемента, имеющего в качестве значения атрибута значение footer:

/* селектор #footer выберет элемент, имеющий идентификатор footer */
#footer {
  height: 50px;
  margin-top: 20px;
}

Универсальный селектор

Универсальный селектор (селектор звёздочка) предназначен для выбора всех элементов.

Синтаксис: *

Пример задания правила для всех элементов на странице:

/* селектор * выберет все элементы на странице */
* {
  margin: 0;
  padding: 0;
}

CSS селекторы по атрибуту

Селекторы по атрибуту предназначены для выбора элементов по имени атрибута и (или) его значению.

Типы селекторов по атрибуту:

• – по имени атрибута;
• – по имени и значению атрибута;
• – по имени и значению, с которого оно должно начинаться;
• – по имени атрибута и его значению, которое равно или начинается со ;
• – по имени атрибута и значению, на которое оно должно заканчиваться;
• – по указанному атрибуту и значению, которое должно содержать ;
• – по имени атрибута и значению, которое содержит отделённое от других с помощью пробела.

Пример задания правила для всех элементов на странице, имеющих атрибут :

/* селектор  выберет все элементы на странице, имеющих атрибут target */
 {
  background-color: red;
}

Пример задания правила для всех элементов на странице, имеющих атрибут со значением :

/* селектор  выберет все элементы на странице, имеющих атрибут rel со значением nofollow */
 {
  background-color: green;
}

Пример задания правила для всех элементов на странице, имеющих атрибут , значение которого начинается с :

/* селектор  выберет все элементы на странице, имеющих атрибут class, значение которого начинается с col */
 {
  background-color: yellow;
}

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

/* селектор  выберет все элементы на странице, имеющих атрибут class, значение которого равно test или начинается с test- */
 {
  background-color: orange;
}

Пример задания правила для всех элементов на странице, имеющих атрибут , значение которого заканчивается на :

/* селектор  выберет все элементы на странице, имеющих атрибут class, значение которого заканчивается на color */
 {
  background-color: yellow;
}

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

/* селектор  выберет все элементы на странице, имеющих атрибут href, значение которого содержит youtu.be */
 {
  background-color: green;
}

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

/* селектор  выберет все элементы на странице, имеющих атрибут data-content, значение которого содержит news, отделённое от других с помощью пробела */
 {
  background-color: brown;
} 

Отрицание селекторов при помощи :not()

Одним из самых многофункциональных считается псевдокласс :not(). Он возвращает все элементы, за исключением тех, которые совпадают с аргументом селектора. Например, p:not(.message) выделяет все элементы p без класса message.

Псевдокласс :not() принимает один аргумент, как и большинство функций в других языках программирования. Любой аргумент, заданный в :not(), должен быть простым селектором, названием класса или ID, другим псевдоклассом. Псевдоклассы не работают так, как составные селекторы типа label.checkbox или сложные селекторы типа p img.

Посмотрите на пример формы, в которой используется текстовые элементы ввода и radio buttons:

<form method="post" action="#">
  <h1>Join the Cool Kids Club</h1>
  <p>
	   <label for="name">Name:</label>
	   <input type="text" id="name" name="name" required>
  </p>

  <p>
	  <label for="email">Email:</label>
	  <input type="email" id="email" name="email" required>
  </p>
  <fieldset>
	<legend>Receive a digest?</legend>
	<p>
		<input type="radio" id="daily" name="digest">
		<label for="daily" class="label-radio">Daily</label>                
		<input type="radio" id="weekly" name="digest">
		<label for="weekly" class="label-radio">Weekly</label>
	</p>
  </fieldset>
  <button type="submit">Buy Tickets!</button>
</form>

В HTML label, ассоциированные с элементами типа radio, имеют класс .label-radio. Можно использовать псевдокласс CSS нажатия :not() для выделения элементов, не имеющих класса label-radio, как это показано на картинке ниже:

label:not(.label-radio) {
  font-weight: bold;
  display:block;   
}

(),
input:not(),
input:not() {
  ...
}

К сожалению, это не поможет, так как каждый новый селектор переписывает предыдущий. Это всё равно, что писать:

input:not(){ ... }
input:not() { ... }
input:not() {... }

Вместо этого, нужно связать псевдоклассы :not() в цепочку, чтобы они отфильтровывали все элементы input:

input:not():not():not() {
...
}

Приведённая цепочка селекторов также соответствует элементам , , и

Использование псевдоклассов и псевдоэлементов CSS без простого селектора эквивалентно его использованию с универсальным селектором. Другими словами, :not() – то же, что и *:not(). В данном случае нашему критерию отвечает любой элемент без атрибута type и значения radio, включая html и body. Чтобы предотвратить это, используйте :not() с названием класса, ID или селектор атрибутов в качестве селектора.

В CSS Class-селекторах Level 4 изменен принцип работы :not(), так что, теперь он принимает в качестве аргумента не только простые селекторы, но и списки. Вместо того чтобы связывать классы, как это делалось раньше, можно указывать аргументы через запятую:

input:not(, , ) {
...
}

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

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

Пожалуйста, оставьте ваши комментарии по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, отклики, лайки, дизлайки, подписки!

Валентин Сейидовавтор-переводчик статьи «CSS Pseudo-classes: :not() and :target»

Группирование селекторов (А, B)

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

Пример 1. Стиль для каждого селектора

Из данного примера видно, что стиль для элементов <h1>, <h2>, <h3> содержит одинаковое значение font-family. Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов, как показано в примере 2.

Пример 2. Сгруппированные селекторы

В данном примере единое для всех селекторов свойство font-family применяется сразу к нескольким селекторам, а отдельные свойства уже добавляются к каждому селектору отдельно.

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

Здесь свойство background применяется одновременно к элементу <h2> и к классам block и msg.

Фильтр по месту среди соседей

При выборе элемента можно указать его место среди соседей.

Список псевдоклассов для этого:

• – первый потомок своего родителя.

• – последний потомок своего родителя.

• – единственный потомок своего родителя, соседних элементов нет.

• – потомок номер своего родителя, например – второй потомок. Нумерация начинается с .

  

  

  

  

  

  

  

  

  

  

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

  Этот псевдокласс будет фильтровать все элементы, которые попадают под формулу при каком-либо . Например:
  — даст элементы номер , , …, то есть чётные.

  • даст элементы номер , …, то есть нечётные.
  • даст элементы номер , , и так далее.

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

:nth-last-child(a), :nth-last-child(an+b) – то же самое, но отсчёт начинается с конца, например :nth-last-child(2) – второй элемент с конца.

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

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

Важно: На псевдокласс указывает наличие двоеточия ()
Три псевдокласса определены именно для гиперссылки (для тега a):

Псевдоклассы для всех элементов:

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

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

Выполнение:

<style type="text/css">

.el1focus { outline thick solid black } 
.el1active { outline thick solid red }

<style> 
<head>
<body> 
<input type="text" class="el1" value="щелкни по мне">

Результат:

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

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

селекторпсевдокласс { property value; }

Существуют следующие псевдоклассы:

1. active — Активная ссылка. Цвет ссылки меняется при нажатии на ней кнопки мыши.
2. link — Непосещенная ссылка.
3. hover — Ссылка при наведенном курсоре мыши.
4. focus
5. visited — Посещенная ссылка.
6. first-letter — Определяет стиль для первого символа текстового блока.
7. first-line — Устанавливает стиль для первой строки текстового блока.
8. after
9. before

Первые 4 псевдокласса применяются исключительно к гиперссылкам и задают формат гиперссылки в зависимости от ее состояния. Последующие 2 — к любому текстовому блоку.

Использование псевдоклассов для гиперссылок позволяет добиться довольно интересных эффектов. Таких, например, как создание ролловеров. Для этого можно задействовать стиль для класса элемента <a> и его псевдокласса hover:

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

/* Стилевые правила */
a.rollover {
    color #660000;
    text-decoration none;
}                         
a.rolloverhover {
    color #FF0000;
    text-decoration underline;
}                           
 
<!-- Применение в HTML -->
 
<a class="rollover" href="#">Ссылка-ролловер</a><br />
<a href="#">Обычная гиперссылка</a> <br />

Листинг: Unicode символы как иконки

        <style>
            .icon-test:before { content: " "; }
            .icon-test:after { content: " \2652"; }
        <style>
    <head>
    <body>
        <span class="icon-test">Aquarius<span><button>&#x2652; &#9810;<button>

Какие псевдоклассы существуют в CSS?

Рассмотрим, какие псевдоклассы существуют в языке CSS.

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

• — задаёт CSS-свойства ссылкам, но не якорям
• — задаёт CSS-свойства уже посещённым ссылкам
• — задаёт CSS-свойства при наведении курсора мыши на элемент
• — задаёт CSS-свойства при нажатии левой кнопкой мыши по элементу, при условии что кнопка мыши еще не отпущена
• — задаёт CSS-свойства при получении элементом фокуса, например щелкнули по текстовому полю (для того чтобы ввести данные), фокус могут получить (ссылки, кнопки, элементы формы), помимо щелчка мыши фокус могут получать элементы при нажатии на кнопку табуляции (Tab) на клавиатуре

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

• — задаёт CSS-свойства при выделении элементов формы, таких как флажки (radio) или переключаетели (checkbox)
• — задаёт CSS-свойства отключённым (заблокированным) элементам формы
• — задаёт CSS-свойства включённым (обычным) элементам формы
• — задаёт CSS-свойства не обязательным для заполнения элементам формы input, у которых отсутствует атрибут required
• — задаёт CSS-свойства обязательным для заполнения элементам формы input, у которых имеется атрибут required

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

• — задаёт CSS-свойства первому потомку родителя (родитель потомок:first-child { })
• — задаёт CSS-свойства последнему потомку родителя
• — задаёт CSS-свойства первому потомку родителя по типу
• — задаёт CSS-свойства последнему потомку родителя по типу
• — задаёт CSS-свойства потомкам родителя на основе их нумерации в структуре HTML-документа или внутри родителя (:nth-child(odd|even|число|выражение))
• — то же что и :nth-child, только нумерация идёт с конца
• — задаёт CSS-свойства потомкам элемента по типу, на основе их нумерации в структуре HTML-документа или внутри родителя (:nth-of-type(odd|even|число|выражение))
• — то же что и :nth-of-type, только нумерация идёт с конца
• — задаёт CSS-свойства элементу потомку, при условии что он единственный у родителя
• — задаёт CSS-свойства элементу потомку по типу, при условии что он единственный у родителя

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

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

• — задаёт CSS-свойства, пустым элементам страницы, внутри которых ничего нету, даже пробела, например <span></span> или <td></td>
• — задаёт CSS-свойства всем элементам, кроме селекторов указанных в скобках
• — задаёт CSS-свойства для элементов, к которым переходят по ссылкам-якорям

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

На этом пока всё, хотите узнать Разницу между псевдоклассами nth-child и nth-of-type, тогда добро пожаловать в следующий урок

Детские татарские стихи — для малышей и их родителей, участвующих на утренниках в детском саду.

Category:

Разное