Не пропусти
Главная » Интернет новичку » Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода, создание, продвижение и заработок на сайте

Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода, создание, продвижение и заработок на сайте

>

Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода

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

Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода, создание, продвижение и заработок на сайте

Тема селекторов в CSS, которая была начата в предыдущей статье, осталась еще не завершенной, ибо мы рассмотрели только пять из семи возможных типов (тега и класса (class), Id, универсальный и атрибутов) и на очереди остались селекторы псевдоклассов и псевдоэлементов.

Отношения между тегами Html кода — дерево документа

Давайте начнем с псевдоклассов. Тут, правда, сначала нужно будет сделать отступление. Любой браузер, получая документ с любым языком разметки, тут же начинает его разбирать. Модуль, отвечающий в браузере за это дело, обычно называют парсер — он разбирает код, исправляет ошибки и формирует так называемое дерево.

Результат работы парсера любого браузера можно увидеть с помощью некоторых плагинов или расширений для этих обозревателей. Например, все тот же незаменимый плагин для Firefox под названием Firebug показывает это самое дерево документа:

Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода, создание, продвижение и заработок на сайте

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



Таких взаимоотношений может быть всего три вида (очень похоже на построение генеалогического дерева — отношение между родственниками):

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

Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода, создание, продвижение и заработок на сайте
  • Родитель и ребенок — в цепочке предки-потомки всегда есть два ближайших звена, которые будут отвечать понятиям родитель и ребенок. Т.е. у любого Html элемента есть один родитель (ближайший предок) и в то же время у него могут быть или не быть один или же несколько детей.

    Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода, создание, продвижение и заработок на сайте
  • Сестринские (братские) отношения — к ним относятся элементы, у которых один общий родитель.
  • Само по себе название «псевдоклассы» обозначает то, что специально в коде ни у каких элементов (тегов) такие классы (значения для атрибута Class) никто не прописывал, но у этих самых элементов периодически могут возникать определенные динамические состояния, для которых и были придуманы селекторы псевдоклассов.



    Селекторы псевдоклассов — hover, focus, first-child и другие

    Например, селекторы Link и Visited во всех браузерах могут использоваться только для оформления гиперссылок:

    Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода, создание, продвижение и заработок на сайте

    Link подразумевает под собой не посещенную ссылку (по которой пользователь еще не переходил), а Visited — посещенную. Таким образом вы можете настроить, например, изменение цвета для уже посещенных пользователем ссылок, ну или еще что-то другое (задать визуальное состояние для всех посещенных гиперссылок). Естественно, что посещенные будут учитываться именно для данного конкретного браузера и до момента очистки его истории.

    Синтаксис написания селекторов псевдоклассов заключается в проставлении двоеточия после названия Html элемента, для которого вы его используете (a:visited).

    Следующие три селектора (active, hover и focus) могут использоваться для любых тегов:

    Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода, создание, продвижение и заработок на сайте

    Active соответствует клику левой кнопки мыши по тому элементу в Html коде, название которого вы прописали перед этим псевдоклассом в селекторе (в нашем примере это тег гиперссылки A). Как только левую клавишу пользователь отожмет — псевдокласс active исчезнет.

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



    Hover — позволяет изменять визуальное оформление любого элемента в Html коде при наведении на него курсора мыши. При отведении курсора визуальное оформление элемента вернется к используемому по умолчанию.

    Псевдокласс focus — позволяет изменять визуальное оформление тегов находящимся сейчас в фокусе. Как известно, фокус на веб странице можно переносить с помощью нажатия на клавишу Tab на клавиатуре. Причем, фокус может передаваться только между следующими элементам: ссылки и элементы форм в Html.

    Псевдоклассы active и hover в браузере IE 6 работают только для элементов гиперссылок, а focus не работает вообще ни в IE 6, ни в IE 7.

    Последний псевдокласс называется first-child (первый ребенок, в переводе).

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

    Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода, создание, продвижение и заработок на сайте

    First-child в IE 6 не работает, что печально.

    Селекторы псевдоэлементов — first-line (letter), after и before

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

    Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода, создание, продвижение и заработок на сайте



    По самому слову «псевдоэлементы» понятно, что таких тегов в Html коде нет. На данный момент псевдоэлементов всего четыре и они приведены на расположенном чуть выше рисунке. Наверное, понятно по самому названию, что first-line будет указывать на первую линию, а first-letter — на первую букву.

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

    Что это даст? Во всех параграфах на веб странице первые строки текста окрасятся в красный цвет. Для простоты подключим CSS к языку Html с помощью тега style и пропишем соответствующее свойство с использованием псевдоэлемента first-line в селекторе параграфа:

    Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода, создание, продвижение и заработок на сайте

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

    Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода, создание, продвижение и заработок на сайте

    Ну, а с помощью first-letter можно сделать, например, так называемую буквицу (когда первая буква в абзаце отличается большим размером и цветом). Для этого можно будет прописать следующие CSS плавила для данного селектора псевдоэлемента:

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

    Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода, создание, продвижение и заработок на сайте



    А сама вебстраница с буквицей, созданной с помощью селектора first-letter, будет выглядеть так:

    Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода, создание, продвижение и заработок на сайте

    Два оставшихся псевдоэлемента after и before нужны для формирования контента на лету. Давайте посмотрим на примере:

    В результате, в конце каждого абзаца на вебстранице автоматически добавится тот фрагмент, который мы указали в CSS свойстве «content» (оно используется только для псевдоэлементов after и before) и этот фрагмент будет окрашен в красный цвет:

    Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода, создание, продвижение и заработок на сайте

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

    Оказывается, с помощью этих псевдоэлементов можно, например, создать сложную нумерацию вида «5.2.13». Обычными средствами Html этого сделать нельзя, а с использованием before — можно.

    Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода, создание, продвижение и заработок на сайте

    Для того, чтобы получить такой сложно нумерованный список, используется довольно простой Html код:

    Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода, создание, продвижение и заработок на сайте

    Но при этом имеет место быть сложный код CSS стилей с использованием, естественно, псевдоэлементов after и before:



    Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода, создание, продвижение и заработок на сайте

    Все очень здорово, но, к сожалению, after и before не поддерживаются в браузерах IE 6 и IE 7. Увы и ах. В следующей статье мы поговорим про комбинации CSS селекторов и их приоритетность.

    Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

    Подборки по теме:

    Комментарии и отзывы

    Че то я запуталась, а first-child — можно использовать для таблиц — когда надо окрасить один столбец (или шрифт в стобце) в определенный цвет?

    Да и вообще уже здорово позабыла css — пользуюсь готовыми шаблонами Joomla.А все из за таких сильных различий в восприятии браузерами css. Особенно IE6 — обидно,что люди им еще пользуются!(у меня на сайте как минимум 10% от всех пользователей)

    Да уж. Ксс аж уши режет.

    И друг не Цсс а СиЭсЭс

    * Нажимая на кнопку «Добавить комментарий» или «Подписаться» Вы соглашаетесь с политикой конфиденциальности.

    О admin

    x

    Check Also

    Что такое фиаско, а также что означает фраза

    > Что такое фиаско, а также что означает фраза — это фиаско братан Здравствуйте, уважаемые читатели блога Хочу продолжить тему пояснения ярких слов и выражений, которые не всегда могут быть ...

    Что такое респект и что значит это слово при общении в интернете, создание, продвижение и заработок на сайте

    > Что такое респект и что значит это слово при общении в интернете Здравствуйте, уважаемые читатели блога Давайте продолжим разбирать наиболее часто употребляемые интернет-мемы (специфические, присущие в основном только этой ...

    Что такое рерайт (рерайтинг) и с чем его едят, создание, продвижение и заработок на сайте

    > Что такое рерайт (рерайтинг) и с чем его едят? Здравствуйте, уважаемые читатели блога Если у вас есть сайт, либо вы планируете им обзавестись, то, конечно же, вы слышали слово ...

    Что такое репост и как делать репосты во ВКонтакте, создание, продвижение и заработок на сайте

    > Что такое репост и как делать репосты во ВКонтакте? Здравствуйте, уважаемые читатели блога Согласно официальному определению, репост – это возможность мгновенно поделиться информационной заметкой, размещённой в соцсетях, при этом ...

    Что такое кэш

    > Что такое кэш — как очистить кеш в Опере, Мозиле, Хроме и других браузерах Здравствуйте, уважаемые читатели блога Что такое кэш? Это на самом деле довольно простое и в ...

    Что такое интернет, кто создал всемирную паутину World Wide Web и как работает глобальная сеть, создание, продвижение и заработок на сайте

    > Что такое интернет, кто создал всемирную паутину World Wide Web и как работает глобальная сеть Здравствуйте, уважаемые читатели блога Все мы с вами живем в эпоху глобального интернета и ...

    Что такое Емайл (E-mail) и почему это называют электронной почтой, создание, продвижение и заработок на сайте

    > Что такое Емайл (E-mail) и почему это называют электронной почтой Здравствуйте, уважаемые читатели блога Все когда-то начинают, поэтому вопрос о том, что такое Емейл и какое он имеет отношение ...

    Что такое дроп, дропнутый или освобождающийся домен, создание, продвижение и заработок на сайте

    > Что такое дроп, дропнутый или освобождающийся домен Здравствуйте, уважаемые читатели блога Термин Дроп происходит от английского слова Drop, которое, если верить автоматическому переводчику Google, имеет довольно большое количество значений ...

    Что такое домены, хостинг, DNS сервера и IP адреса, создание, продвижение и заработок на сайте

    > Что такое домены, хостинг, DNS сервера и IP адреса Домены, Ip адреса и связывающие их DNS сервера Что такое доменные имена и какие бывают домены Покупка и продление доменов ...

    Что такое девайс и чем он отличается от гаджета, создание, продвижение и заработок на сайте

    > Что такое девайс и чем он отличается от гаджета Здравствуйте, уважаемые читатели блога В том кругу где я общаюсь очень часто употребляются термины девайс и гаджет, но при этом ...

    Что такое блог и как его создать на бесплатном движке WordPress, оптимизация и заработок на своем интернет-дневнике, создание, продвижение и заработок на сайте

    > Что такое блог и как его создать на бесплатном движке WordPress, оптимизация и заработок на своем интернет-дневнике Здравствуйте, уважаемые читатели Сегодня статья начнется с того, что мы попробуем дать ...

    Что такое анонимайзеры (Хамелеон, Spools) или как скрыть IP адрес для входа в ВКонтакте, Одноклассники, Ютуб и другие сайты, создание, продвижение и заработок на сайте

    > Что такое анонимайзеры (Хамелеон, Spools) или как скрыть IP адрес для входа в ВКонтакте, Одноклассники, Ютуб и другие сайты Здравствуйте, уважаемые читатели блога Прежде чем рассматривать случаи использования анонимайзеров, ...

    Что такое URL адреса, чем отличаются абсолютные и относительные ссылки для сайта, создание, продвижение и заработок на сайте

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

    Что такое RSS, где скачать иконки и какая читалка самая лучшая, создание, продвижение и заработок на сайте

    > Что такое RSS, где скачать иконки и какая читалка самая лучшая Здравствуйте, уважаемые читатели блога Эта статья будет посвящена вопросу — что такое RSS и почему его в обязательном ...

    Что такое Rookee и как продвигать сайт в этой системе, создание, продвижение и заработок на сайте

    > Что такое Rookee и как продвигать сайт в этой системе? Здравствуйте, уважаемые читатели блога Я уже писал про некоторые сервисы помогающие продвигать сайты в автоматическом режиме — Сеопульт, SeoWisard, ...

    Что такое Joomla, создание, продвижение и заработок на сайте

    > Что такое Joomla Свое изучение сайтостроения я начал именно с выяснения вопроса: Что такое Joomla и как она может помочь мне в создании сайтов). Если не считать небольшого опыта ...

    Что такое ICQ, как его установить и пользоваться, создание, продвижение и заработок на сайте

    > Что такое ICQ, как его установить и пользоваться? Здравствуйте, уважаемые читатели блога Не будем расписывать историю возникновения ICQ еще с начала времен его разработки — это не представляет особого ...

    Что такое DNS и как ДНС-сервера обеспечивают работу интернета, создание, продвижение и заработок на сайте

    > Что такое DNS и как ДНС-сервера обеспечивают работу интернета Здравствуйте, уважаемые читатели блога О том, что такое интернет и когда он появился, мы с вам уже говорили. Говорили и ...

    Что такое cookie и как почистить куки в современных браузерах, создание, продвижение и заработок на сайте

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

    Что такое Chmod, какие права доступа назначать файлам и папкам (777, 755, 666) и как это сделать через PHP, создание, продвижение и заработок на сайте

    > Что такое Chmod, какие права доступа назначать файлам и папкам (777, 755, 666) и как это сделать через PHP Сегодня я хотел бы поговорить о правах доступа к файлам ...

    Что мешает SEO-продвижению вашего сайта и как это исправить

    > Что мешает SEO-продвижению вашего сайта и как это исправить — 10 основных ошибок и 5 базовых рекомендаций Здравствуйте, уважаемые читатели блога Сегодня хочу выступить в роли адвоката Сео методов ...

    Рейтинг@Mail.ru