Как использовать псевдоклассы css?

Псевдокласс only-child (единственный из выбранного типа дочернего элемента)

Примените следующий стиль к HTML-коду, который дан в самом начале .

Как вы видите, селектор выбрал два -элемента, каждый из которых вложен в элемент «список» . Почему так и как это работает: only child дословно переводится как «единственный ребёнок / единственный дочерний элемент», поэтому селектор выбирает только те -элементы, у которых родительский элемент имеет только один дочерний элемент —. В нашем случае каждый имеет по одному родительскому и по одному дочернему элементу, поэтому они и были выбраны.

Почему не выбран -элемент, единственный дочерний элемент ненумерованного списка ? Ответ прост: несмотря на то, что он является единственным дочерним -элементом, у него есть ещё два соседа, не являющихся элементами , для которых является родительским. Получается три дочерних элемента, что, разумеется, не попадает под наше правило: один родительский элемент — один дочерний.

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

Последнее обновление: 21.04.2016

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

:enabled: выбирает элемент, если он доступен для выбора (то есть у него не установлен атрибут disabled)
:disabled: выбирает элемент, если он не доступен для выбора (то есть у него установлен атрибут disabled)
:checked: выбирает элемент, если у него установлен атрибут checked (для флажков и радиокнопок)
:default: выбирает элементы по умолчанию
:valid: выбирает элемент, если его значение проходит валидацию HTML5
:invalid: выбирает элемент, если его значение не проходит валидацию
:in-range: выбирает элемент, если его значение находится в определенном диапазоне (для элементов типа ползунка)
:out-of-range: выбирает элемент, если его значение не находится в определенном диапазоне
:required: выбирает элемент, если у него установлен атрибут required
:optional: выбирает элемент, если у него не установлен атрибут required

Псевдоклассы enabled и disabled

Псевдоклассы enabled и disabled выбирают элементы форм в зависимости от того, установлен ли у них атрибут disabled:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :enabled {
				border: 2px black solid;
				color: red;
			}
        </style>
    </head>
    <body>
        <p><input type="text" value="Enabled" /></p>
        <p><input type="text" disabled value="Disabled" /></p>
    </body>
</html>

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

Псевдокласс checked стилизует элементы формы, у которых установлен атрибут :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :checked + span {
				color: red;
				font-weight: bold; 	/* выделение жирным */
			}
        </style>
    </head>
    <body>
			<h2>Выберите технологию</h2>
			<p>
                <input type="checkbox" checked name="html5"/><span>HTML5</span>
            </p>
            <p>
                <input type="checkbox" name="dotnet"/><span>.NET</span>
            </p>
            <p>
                <input type="checkbox" name="java"/><span>Java</span>
            </p>
			
			<h2>Укажите пол</h2>
			<p>
                <input type="radio" value="man" checked name="gender"/><span>мужской</span>
            </p>
            <p>
                <input type="radio" value="woman" name="gender"/><span>женский</span>
            </p>
    </body>
</html>

Селектор позволяет выбрать элемент, соседний с отмеченным элементом формы.

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

Псевдокласс :default выбирает стандартный элемент на форме. Как правило, в роли такого элемента выступает кнопка отправки:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :default {
				border: 2px solid red;
			}
        </style>
    </head>
    <body>
		<form>
            <input name="login"/>
            <input type="submit" value="Войти" />
        </form>
    </body>
</html>

Псевдоклассы valid и invalid

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            input:invalid {
				border: 2px solid red;
			}
			input:valid {
				border: 2px solid green;
			}
        </style>
    </head>
    <body>
		<form>
            <p><input type="text" name="login" placeholder="Введите логин" required /></p>
            <p><input type="password" name="password" placeholder="Введите пароль" required /></p>
            <input type="submit" value="Войти" />
        </form>
    </body>
</html>

Псевдоклассы in-range и out-of-range

Псевдоклассы :in-range и :out-of-range стилизуют элементы формы в зависимости от того, попадает ли
их значение в определенный диапазон. Это в первую очередь относится к элементу .

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :in-range {
				border: 2px solid green;
			}
			:out-of-range {
				border: 2px solid red;
			}
        </style>
    </head>
    <body>
		<form>
            <p>
				<label for="age">Ваш возраст:</label> 
				<input type="number" min="1" max="100" value="10" id="age" name="age"/>
			</p>
            <input type="submit" value="Отправить" />
        </form>
    </body>
</html>

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

Псевдоклассы required и optional

Псевдоклассы :required и :optional стилизуют элемент в зависимости от того, установлен ли у него атрибут :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :optional {
				border: 2px solid blue;
			}
			:required {
				border: 2px solid red;
			}
        </style>
    </head>
    <body>
		<form>
			<p>
				<label for="login">Логин:</label> 
				<input type="text" id="login" name="login" required />
			</p>
			<p>
				<label for="password">Пароль:</label> 
				<input type="password" id="password" name="password" required />
			</p>
            <p>
				<label for="name">Имя:</label> 
				<input type="text" id="name" name="name"/>
			</p>
            <input type="submit" value="Регистрация" />
        </form>
    </body>
</html>

НазадВперед

Что дальше

Как я уже писал выше, всё, что связано с применением стилей к плэйсхолдерам ещё не стандартизировано. Скоро это исправят. В спецификацию Selector Level 4 был добавлен псевдокласс:placeholder-shown , который, наконец-то, приведёт к стандарту всю ту безумную смесь из псевдоклассов и псевдоэлементов, которая существует сейчас. Следить за поддержкой можно на caniuse (сейчас не поддерживается ни в одном браузере).

Применять стили с помощью:placeholder-shown будет гораздо проще:

Placeholders, those frequently grayed out text elements inside an input, can be a pain to style. Fortunately we»ve sourced a short but effective CSS solution to style your input»s placeholder text any color and opacity you wish. Read on for the code.

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

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

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

Псевдокласс 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

Специфика CSS

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

input:invalid { color: red; }
input:enabled { color: black; }

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

Старайтесь использовать простые селекторы, и использовать минимум кода. Например, пустое обязательное (:required) поле будет невалидным (:invalid), так что редко когда нужно стилизовать первое состояние.

Псевдокласс nth-child (n-й дочерний элемент)

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

Обратите внимание на следующий пример:

Всё работает так же, как и с селектором .

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

Итак, давайте перейдём к новому примеру:

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

Если селектор получает числа, выходящие за пределы секторов (как -1, 5, 6), он просто их игнорирует.

На схеме ниже показано действие селектора :

На сайте CSS Tricks вы сможете найти очень полезную и исчерпывающую статью о селекторе .

А пока что давайте перейдём к последнему селектору в нашем руководстве.

Селекторы потомков

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

a {
	text-decoration: none;
}

А что делать в том случае, когда нам нужны подчеркнутые ссылки, но только тогда, когда они находятся в теге ? Мы могли бы создать отдельный класс и присваивать его нужным ссылкам, но это не совсем верный способ, который требует как дополнительных затрат по времени, так и места в HTML-коде. Гораздо легче использовать селекторы потомков (контекстные селекторы) и записать:

p a {
	text-decoration: underline;
}

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

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

Иерархия HTML-тегов: родственные связи

Глядя на схему, легко понять родственные связи тегов – можно сказать, здесь всё обстоит так же, как у людей :

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

При создании селектора потомков сначала записывается название предка, а затем – название потомка. Рассматривая вышеприведенный пример с подчеркнутыми ссылками, мы могли бы записать селектор потомков несколькими способами:

html body p a {};
body p a {};
p a {};

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

/*для классов*/
.blogcontent a {
	color: blue;
}

/*для идентификаторов*/
#mobilenav a {
	font-size: 12px;
}

CSS псевдоэлемент before

before предназначен для создания псевдоэлемента внутри элемента перед его контентом. По умолчанию данный псевдоэлемент имеет display: inline . Если псевдоэлементу before нужно установить другое отображение, то его нужно указать явно (например: display: block ).

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

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

Изменение цвета placeholder

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

<style>
  ::-webkit-input-placeholder {color:#f00; opacity:1;}/* webkit */
  ::-moz-placeholder          {color:#f00; opacity:1;}/* Firefox 19+ */
  :-moz-placeholder           {color:#f00; opacity:1;}/* Firefox 18- */
  :-ms-input-placeholder      {color:#f00; opacity:1;}/* IE */
</style>

<input type="text" placeholder="Начните вводить текст" value="" />

Если не указать «opacity», то цвет в браузерах, поддерживающих прозрачность, будет розовым. Так же можно указать для разных полей разные цвета. Для этого используйте классы.

 .input-1::-webkit-input-placeholder { color:red; }
 .input-2::-webkit-input-placeholder { color:green; }
 ...
 и.т.д.

Изображения

Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений

Changing placeholder text color

Let»s start with a simple input and some placeholder text, for this example we»ll use the word «search» but you can use anything you want. The basic HTML is below:

HTML

Input (and textarea) placeholder text defaults to a light gray color, however, we can change that with a few lines of CSS. Here we»ll color the input text red using an HTML color name, but any color method will suffice (HEX, RGB, HSL).

CSS

Note that it»s important to include the different vendor prefixes in order to support as many browsers as possible. Only Firefox»s input placeholder text defaults to a slight transparency so its unnecessary to set the opacity property on IE or Chrome.

Псевдо-элемент ::first-letter

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
	  .firstletter {
	    font-size: 150%;
		font-weight: bold;
	  }
    </style>
  </head>
  <body>
    <p><span class="firstletter">Н</span>аш текст</p>
  </body>
</html>

Попробовать »

Или мы можем стилизовать первую букву в тексте с помощью псевдо-элемента ::first-letter, в этом случае нам не придется добавлять лишний элемент в HTML-разметку:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
	  p::first-letter {
	    font-size: 150%;
		font-weight: bold;
	  }
    </style>
  </head>
  <body>
    <p>Наш текст</p>
  </body>
</html>

Попробовать »

Возможности стилизации

Для псевдоэлемента placeholder в CSS можно установить следующие параметры:

фон — группа background-свойств. Фон блока подсказки распространяется на все поле ввода. Можно задать не только цвет (background-color), но и изображение (background-image).
цвет текста — color;
прозрачность — opacity;
подчеркивание, надчеркивание или зачеркивание — text-decoration;
регистр — text-transform;
внутренние отступы — padding. Поддерживается не всеми браузерами. Как для строчных элементов, верхний и нижний отступы игнорируются.
отображение шрифта — свойства группы font, line-height и разнообразные отступы (text-indent, letter-spacing, word-spacing);
вертикальное выравнивание в строке — vertical-align;
обрезка текста при переполнении контейнера — text-overflow.

Input1::placeholder {
background-image: linear-gradient(lime, blue);
color: white;
}
.input2::placeholder {
text-decoration: line-through;
color: purple;
font-weight: bold;
}
.input3::placeholder {
font-size: 16px;
letter-spacing: 10px;
}
.input4::placeholder {
background: brown;
color: white;
text-overflow: ellipsis;
}

Состояние «включено» и Unicode-символ «галочка»

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

inputtype=checkbox:checked + .pseudocheckbox::before { … }

Отмеченный переключатель обычно имеет внутри «галочку». Здесь нам на помощь приходит разнообразие символов Unicode, которое выходят далеко за пределы собственно букв и цифр. Есть среди этого многообразия и несколько значков для «галочки». Код значка мы запишем в свойство content:

inputtype=checkbox:checked + .pseudocheckbox::before { content: «\2714»; }

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

Центрируем по горизонтали:

text-align: center;

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

font-family: Arial, sans-serif;font-size: 16px;

Кроме размера нужно добиться необходимого положения символа внутри квадратика по вертикальной оси. Лучше всего это делать с помощью line-height:

line-height: 16px;

line-height нужно подбирать индивидуально для каждого сочетания размера и семейства шрифта.

При выравнивании по базовой линии текста (vertical-align: baseline) именно значение line-height определеяет, где, собственно, будет нижняя граница текста у «квадратика». Если эти значения у отмеченного и неотмеченного будут отличаться, то они окажутся выровненными по-разному (так может получиться, например, если явно указать line-height только у отмеченного). Поэтому line-height лучше указывать в общем блоке стилей для ::before.

line-height обычно подбирают вместе с font-size, поэтому его удобно иметь в блоке стилей рядом. font-size, в свою очередь, может подбираться вместе с другими параметрами текста. Так что все их удобней перенести в общий блок для ::before, хотя, на первый взгляд, правила стилизации текста там выглядит нелогично, т.к. самого текста там нет.

Напоследок добавим жирность и укажем цвет:

font-weight: bold;color: #808080;

Все права на данную статью принадлежат порталу webew.ru.
Перепечатка в интернет-изданиях разрешается только с указанием автора
и прямой ссылки на оригинальную статью. Перепечатка в печатных
изданиях допускается только с разрешения редакции.

Setting Place Holder Color and other Properties Using CSS

The key to applying special colors and other styling to an HTML input’s placeholder text is defining unique rules for the ::placeholder pseudo elements.

Normally, HTML input field placeholder text is rendered using default styles and a slightly gray color. But thanks to the ::placeholder pseudo element you can change this to fit your needs.

If you are not familiar with pseudo element selectors they are typically prefixed by ::. Sometimes you might see a single :, but the may only apply to some vendor specific implementations.

The pseudo element selector can be appended to any other selector. For our purposes I have defined a series of rules to change the color of different placeholders text.

A problem presented by the ::placeholder pseudo element is it is not a standard selector, yet. This means there are different variations you need to support.

While most browsers support the ::placeholder selector, you should still include rules for vendor specific selectors. These are prefixed with -webkit-, -moz- and -ms-. You can see how I used them in the code below.

I also found that stacking the selectors like I would normally do does not work.

This means you must define a unique rule to apply the styles to the placeholder text. This leans to a series of duplicated rules, which makes for messy maintenance.

To demonstrate the affect I defined a series of rules to apply different colors. Each color corresponds to standard Bootstrap colors to indicate different states.

I thought using the Bootstrap colors with their corresponding states would help convey the thought of using placeholder text styles to convey meaning to the user.

You are not limited to setting the placeholder text. You can apply any style you want to the placeholder text. For extra affect I increased the font size to 1.3em and made the text all capital letters.

The final result is a simple form with input fields using customized placeholder text styles.

:nth-child

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

Возьмем обычный список, зададим симпатичные стили его элементам и отдельно раскрасим 5ый элемент:

See the Pen aboqOvL by Websitio (@Websitio) on CodePen.

Таким образом можно выбрать несколько элементов, 5ый и 7ой:

See the Pen wvwyaGw by Websitio (@Websitio) on CodePen.

Переменная n

В общем виде значение задаётся с помощью математического выражения an+b, где a и b это целые числа, а n последовательность целых чисел от 0 и до бесконечности (0, 1, 2, 3 ….). Если браузер находит элемент с вычисленным порядковым номером, то применяет кнему указанные стили.

Рассмотрим на примере.
При n=0 получаем 2х0=0. Нулевых элементов нет — ничего не покрасится.
При n=1 2х1=2. Стили применятся ко второму по порядку элементу.
При n=2 2х2=4. Стили применятся к четвертому элементу.
И т.д.

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

Для чётных элементов существует также специальное ключевое слово.

Аналогично для нечетных чисел есть специальное слово или запись через счетчик n

n=0 получаем 2х0+1=1. 1ый элемент.
n=1 2х1+1=3. 3ий элемент.
n=2 2х2+1=5. 5ый элемент.

В примере ниже одновременно применены odd и even.

See the Pen vYBdOxb by Websitio (@Websitio) on CodePen.

Более сложные выражения

— стили применятся к каждому 5му элементу начиная с 4го

See the Pen LYPQVLB by Websitio (@Websitio) on CodePen.

Выделить все элементы кроме нескольких начальных

Если в формуле an+b задать b как большое положительное число, то элементы с номером меньше b не будут покрашены, а всеостальные, начиная с номера b — будут

See the Pen rNBJVGG by Websitio (@Websitio) on CodePen.

Отрицательный n

Такая запись позволит выделить только 5 начальных элементов, а все остальные не выделять.

See the Pen ZEzrGay by Websitio (@Websitio) on CodePen.

Комбинирование выражений в :nth-child

Можно применять последовательно несколько

Первая часть выражения выделит элементы с 3го до бесконечности, вторая до 13го.
Стили применяться к элементам на пересечении этих двух множеств: от 3 до 13. Всего будут выделены 11 элементов.