CSS псевдо-классы

Последнее обновление 8 мая 2019 11:53:17 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

псевдо-классы

CSS псевдоклассы выбирают элементы не на основе их имен, а на основе их состояния.

Например, если вы хотите установить стиль для разных состояний (активный, наведение и т. Д.) Гиперссылки, вы не можете сделать это, просто выбрав элемент a . В этих случаях вам нужно использовать псевдо-классы CSS.

Псевдоклассы CSS всегда начинаются с ":".

синтаксис:

 elementName: CSS_Pseudo_Class {CSS-Property: value; ........................}

CSS: первоклассные псевдо-классы

CSS: псевдо-классы first-child выбирают первый дочерний элемент элемента. Он игнорирует все остальные дочерние элементы в выбранном элементе, даже если они доступны.

Пример CSS: псевдо-классы первого ребенка

Код CSS:

 div > p:first-child {
background-color: lime; /* sets background color as lime */ 
color: darkgreen; /* sets textcolor as lightyellow */
}

HTML код:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS first child pseudo class</title>
<link rel='stylesheet' href='Example-of-CSS-first-child-pseudo-class.css' type='text/css'>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus. Aenean tempus adipiscing porttitor.</p>
<p>Quisque aliquam nunc vel arcu varius aliquam. Vestibulum euismod nulla id nulla suscipit sollicitudin.</p>
</div>
</body>
</html>

Результат

Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Донецк урна элит. Integer malesuada tempus enim nec rhoncus. Энея Темпус, ждущий porttitor.

Алисквам, полный аликвам. Vestibulum euismod nulla id nulla suscipit sollicitudin.

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

CSS псевдо-классы ссылки -: ссылка и: посещенные

CSS: псевдокласс класса link используется для описания представления ссылок, которые еще не были посещены.

CSS: посещенный псевдокласс используется для описания презентации после посещения пользователем ссылки.

Пример псевдоклассов CSS link -: link и: visit

Код CSS:

a:link {color: red } /* sets link color to red */ 
a:visited {color: darkgreen}  /* sets link visited color to darkgreen */

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS link and visited pseudo classes</title>
<link rel='stylesheet' href='Example-of-CSS-link-and-visited-pseudo-classes.css' type='text/css'>
</head>
<body>
<a href="/index.php">w3resource tutorials</a>
</body>
</html>

Посмотрите этот пример псевдо-классов CSS link -: link и: visit в отдельном окне браузера.

CSS динамические псевдоклассы:: hover,: active и: focus

CSS: псевдокласс hover используется для описания представления гиперссылки, когда пользователь наводит на нее мышь (или любое другое указывающее устройство).

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

CSS: активный псевдокласс используется для описания представления гиперссылки, когда пользователь фокусируется (т.е. принимает события клавиатуры или другие формы ввода текста) на нее.

Код CSS:

a:active {color: yellow } /* sets link active color to yellow */ 
a:hover {color: pink}  /* sets link hover color to  pink */
a:focus {color: maroon}  /* sets link focus color to  maroon */

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS link and visited pseudo classes</title>
<link rel='stylesheet' href='Example-of-CSS-dynamic-pseudo-classes-hover-active-and-focus.css' type='text/css'>
</head>
<body>
<a href="/index.php">w3resource tutorials</a>
</body>
</html>

Посмотрите этот пример CSS динамических псевдо-классов-hover-active-and-focus в отдельном окне браузера.

CSS псевдо-классы:: lang

Псевдокласс CSS: lang (languageName) соответствует, если элемент находится на языке languageName .

Код CSS:

:lang(fr){color: red;}

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS :lang  pseudo classes</title>
<link rel='stylesheet' href='Example-of-CSS-pseudo-classes-lang.css' type='text/css'>
</head>
<body>
<p lang="fr">L'élève va à l'école et ceci est écrit en Français!</p>
<p lang="en">This text is goign to be effected by stylesheet.</p>
</body>
</html>

Посмотрите этот пример псевдо-классов CSS:: lang в отдельном окне браузера.

Предыдущий: CSS идентификаторы
Далее: CSS псевдоэлементы