Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 13:

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

< Лекция 12 || Лекция 13: 12 || Лекция 14 >

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

Псевдо-классы можно объединять с классами CSS:

a.silver:visited {color: #C0C0C0 }

<a class="silver" href="index.php">Silver</a>

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

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

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

Примеры:

  1. В данном примере селектор соответствует любому элементу 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>
  2. В данном примере селектор соответствует любому элементу strong, который является первым потомком элемента div, и задает font-style как italic для первого strong внутри элемента div:
    div:first-child strong
    {
    font-style: italic
    }

    В следующем коде HTML strong является первым потомком элемента div:

    <div>Изучайте -- <strong>язык программирования</strong> C++.</div>
  3. В данном примере селектор соответствует любому элементу b, который является первым потомком любого элемента, и задает text-decoration как none:
    b:first-child
    {
    text-decoration: none
    }

    В следующем примере первый элемент b в коде HTML ниже является первым потомком параграфа и не будет подчеркиваться. Но второй элемент a в параграфе не является первым потомком параграфа и будет подчеркнут:

    <p>
    Посетите <b>www.intuit.ru</b> и выучите CSS!
    Посетите <b><a href="http://www.intuit.ru">www.intuit.ru</a></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
< Лекция 12 || Лекция 13: 12 || Лекция 14 >
Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?

Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Зарина Каримова
Зарина Каримова
Казахстан, Алматы, Гимназия им. Ахмета Байтурсынова №139, 2008
Akiyev Begench
Akiyev Begench
Беларусь, Полоцк, полоцкий государственный университет