Псевдо-классы используются для создания специальных эффектов для некоторых элементов.
Примеры:
- В примере показано, как выделить гиперссылку в документе цветом.
<html>
<head>
<style type="text/css">
a:link {color: #808080}
a:visited {color: #FFFF00}
a:hover {color: #00FF00}
a:active {color: #0000FF}
</style>
</head>
<body>
<p><a href="index.php">This is a link</a></p>
<ol><b>Примечание:</b>
<li><i>a:hover ДОЛЖЕН следовать в определении CSS после <b>a:link</b> и
<b>a: visited!!</b></i></li>
<li><i>a:active ДОЛЖЕН следовать в определении CSS после <b>a:hover!!</b></i></li>
</ol>
</body>
</html>
- В примере показано, как определить для гиперссылки другой стиль.
<html>
<head>
<style type="text/css">
a.color:link {color: #808000}
a.color:visited {color: #008080}
a.color:hover {color: #C0C0C0}
a.size:link {color: #808000}
a.size:visited {color: #008080}
a.size:hover {font-size: 250%}
a.background:link {color: #808000}
a.background:visited {color: #008080}
a.background:hover {background: #C0C0C0}
a.family:link {color: #808000}
a.family:visited {color: #008080}
a.family:hover {font-family: sans-serif}
a.line:link {color: #808000; text-decoration: none}
a.line:visited {color: #008080; text-decoration: none}
a.line:hover {text-decoration: line-through}
</style>
</head>
<body>
<p>Наведите курсор мыши на ссылки.</p>
<p><b><a class="line" href="index.php">Меняем оформление текста у ссылки</a></b></p>
<p><b><a class="size" href="index.php">Меняем размер у ссылки</a></b></p>
<p><b><a class="background" href="index.php">Меняем цвет фона у ссылки</a></b></p>
<p><b><a class="family" href="index.php">Меняем семейство шрифта у ссылки</a></b></p>
<p><b><a class="color" href="index.php">Меняем цвет у ссылки</a></b></p>
</body>
</html>
- В примере показано, как можно использовать псевдо-класс :first-child.
<html>
<head>
<style type="text/css">
a:first-child
{
text-decoration:underline
}
</style>
</head>
<body>
<p>Посетите <a style="color:#666666;" href="/external/?popup=0&url=http%3A%2F%2Fwww.intuit.ru" onMouseOver="menuSetHelpText('intuit');return false;" onMouseOut="menuClearHelpText()" title="ссылка на INTUIT.ru">Intuit</a> там много бесплатных курсов</p>
<p>Посетите <a style="color:#666666;" href="/external/?popup=0&url=http%3A%2F%2Fwww.intuit.ru" onMouseOver="menuSetHelpText('intuit');return false;" onMouseOut="menuClearHelpText()" title="ссылка на INTUIT.ru">Intuit</a>
там есть бесплатные учебные программы</p>
</body>
</html>
- В примере показано, как можно использовать псевдо-класса :lang.
<html>
<head>
<style type="text/css">
b:lang(fr)
{
quotes: "'" "'"
}
</style>
</head>
<body>
<p>Просто текст<b lang="fr">Выделенный текст:</b> Сам текст.</p>
</body>
</html>
Синтаксис псевдо-классов:
selector:pseudo-class {property: value}
Классы CSS также можно использовать с псевдо-классами:
selector.class:pseudo-class {property: value}
Анкерные псевдо-классы
Различные ссылки или ссылки, на которые указывает курсор мыши, можно выводить различным образом в поддерживающих CSS браузерах:
a:link {color: #808080 } /* непосещенная ссылка*/
a:visited {color: #008000 } /* посещенная ссылка */
a:hover {color: #008080 } /* курсор мыши указывает на ссылку*/
a:active {color: #00FF00 } /* выбранная ссылка*/
Примечания:
- Чтобы иметь эффект, a:hover ДОЛЖЕН следовать в определении CSS после a:link и a:visited!!
- Чтобы иметь эффект, a:active ДОЛЖЕН следовать в определении CSS после a:hover!!
- Имена псевдо-классов не зависят от регистра символов.
Псевдо-классы и классы CSS
Псевдо-классы можно объединять с классами CSS:
a.silver:visited {color: #C0C0C0 }
<a class="silver" href="index.php">Silver</a>
Если ссылка в приведенном выше примере была посещена, она будет выводиться серебряным цветом.
CSS2 - Псевдо-класс :first-child
Псевдо-класс :first-child соответствует определенному элементу, который является первым потомком другого элемента.
Примеры:
- В данном примере селектор соответствует любому элементу h1, который является первым потомком элемента div, и делает отступ для первой строки первого параграфа внутри элемента div:
div > h1:first-child
{
text-indent:50px
}
Этот селектор будет соответствовать первому параграфу внутри div в следующем коде:
<div>
<h1>
Первый заголовок в div.
Имеет отступ первой строки.
</h1>
<h1>
Второй заголовок в div.
Не имеет отступа.
</h1>
</div>
но он не будет соответствовать параграфу в следующем коде HTML:
<div>
<p>
Параграф внутри div.
</p>
<h1>Первый заголовок в div.
Не имеет отступа.
</h1>
</div>
- В данном примере селектор соответствует любому элементу strong, который является первым потомком элемента div, и задает font-style как italic для первого strong внутри элемента div:
div:first-child strong
{
font-style: italic
}
В следующем коде HTML strong является первым потомком элемента div :
<div>Изучайте -- <strong>язык программирования</strong> C++.</div>
- В данном примере селектор соответствует любому элементу b, который является первым потомком любого элемента, и задает text-decoration как none:
b:first-child
{
text-decoration: none
}
В следующем примере первый элемент b в коде HTML ниже является первым потомком параграфа и не будет подчеркиваться. Но второй элемент a в параграфе не является первым потомком параграфа и будет подчеркнут:
<p>
Посетите <b>www.intuit.ru</b> и выучите CSS!
Посетите <b>www.intuit.ru</b> и выучите HTML!
</p>
CSS2 - Псевдо-класс :lang
Данный псевдокласс позволяет определить специальные правила для различных языков. В следующем примере класс :lang определяет тип кавычек для элементов b с атрибутом lang со значением "fr":
<html>
<head>
<style type="text/css">
b:lang(fr)
{
quotes: "'" "'"
}
</style>
</head>
<body>
<p>Просто текст <b lang="fr">Выделенный текст</b>
Остальной текст</p>
</body>
</html>
Псевдо-классы
Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.
| Псевдо-класс |
Назначение |
IE |
F |
N |
W3C |
| :active |
Добавляет специальный стиль активированному элементу |
4 |
1 |
8 |
1 |
| :focus |
Добавляет специальный стиль элементу, когда элемент находится в фокусе |
- |
- |
- |
2 |
| :hover |
Добавляет специальный стиль элементу, когда указатель мыши находится над элементом |
4 |
1 |
7 |
1 |
| :link |
Добавляет специальный стиль непосещенной ссылке
|
3 |
1 |
4 |
1 |
| :visited |
Добавляет специальный стиль посещенной ссылке
|
3 |
1 |
4 |
1 |
| :first-child |
Добавляет специальный стиль элементу, который является первым потомком некоторого другого элемента |
|
1 |
7 |
2 |
| :lang |
Позволяет автору определить используемый в заданном элементе язык |
|
1 |
8 |
2 |
|
Посмотреть
порно видео в онлайне »