Виды селекторов: Знаете ли вы селекторы? – Селекторы. Виды селекторов. — WebLegko

Селекторы CSS и их виды

В данном уроке мы рассмотрим, что такое CSS селекторы (CSS Selectors), для чего они предназначены и чем они могут быть полезны при оформлении страниц.

Грамотное использование CSS селекторов позволяет не перегружать код, а также сделать его более логичным.

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

Из урока Основы CSS вы уже знаете, что присвоение свойств тому или иному элементу задается при помощи правил. Структура правила имеет следующую конструкцию:

Структура правила

Структура правила

Как вы видите, селектором называется левая часть правила до фигурной скобки. Дальше идет блок объявления стилей который состоит из свойства и значения. Рассмотрим все особенности и виды селекторов по порядку.

CSS Селектор по элементу.

CSS Селекторами могут быть любые элементы html т. е. обычные теги. Например, зададим цвет и размер текста обрамленного в тег <p></p> т. е. цвет и размер абзаца текста.

 

p {color:#666; font-size:12px;}

 

Т. е. в этом случае тег <p> является селектором. Таким же образом в качестве селектора можно использовать любые теги. В данном случае, цвет и размер текста задается тегу <p>, и все теги <p>, которые будут встречаться в коде страницы, будут иметь заданный размер и цвет текста.

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

CSS Селекторы классов.

Данные селекторы позволяют каждому тегу присвоить класс, который будет иметь свое определенно стилевое оформление. Присвоение класса тегу происходит следующим образом:<p class=”redmal”> Где вместо “redmal” можно задавать любое другое слово или буквы.

Код стилей будет иметь следующий вид:

 

p {color:#666; font-size:12px;}
p.redmal { color:#b50404; font-size:11px;}

 

Код этих абзацев в html файле будет следующий:

 

<p>Текст оформленный при помощи селектора p</p>
<p>Текст оформленный при помощи селектора p.redmal</p>

 

Первый абзац, как и раньше, будет иметь серый текст размером 12 пикселей. Второй абзац будет иметь красный текст размером 11 пикселей.

Селекторы классов

Селекторы классов

Кроме этого данный класс можно применить не только к тегу <p> но и к любому другому элементу. Чтобы это стало возможным в стилях необходимо указать, что данный класс можно применять ко всем тегам. Для этого перед точкой элемент ставить не нужно. Например:

 

.redmal {color:#b50404; font-size:11px;}

 

Теперь этот класс можно применить как к тегу <p> так и к любому другому. Например, применим его и к абзацу и к ячейке таблицы:

 

<p>Текст оформленный при помощи селектора p</p>
<p>Текст абзаца оформленный при помощи селектора .redmal</p> <table border="1">
<tr>
<td>Текст помещенный в ячейку таблицы и оформленный при помощи селектора .redmal </td>
</tr>
</table>

 

Селекторы по классу

Селекторы по классу

Можно так же придать разное оформление тегам с одним и тем же классом. В этом случае в стилях необходимо прописать следующее:

 

p.redmal { color:#b50404; font-size:12px;}
td.redmal { color:#666666; font-size:14px;}

 

При этом текст в теге <p> будет красный размером 12 пикселей, а в теге <td> серый размером 14 пикселей.

9

9

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

Это правило очень часто игнорируется потому, как все браузеры позволяют применять один и тот же ID к нескольким элементам. Главное отличие ID от класса в том, что в ID для адресации используется знак # а не точка. Например:

 

p#sin { color:#548DD4; }

 

В HTML коде необходимо написать следующее:

 

<p>Текст оформленный при помощи ID p#sin</p>

 

Текст в абзаце будет синего цвета:

Селекторы по идентификатору

Селекторы по идентификатору

Контекстный селектор. Предположим, что нам необходимо в абзаце выделить текст тегом <strong></strong> т. е., текст заключенный между этими тегами будет жирный. Но кроме того что он будет жирным нам необходимо чтобы он был например красного цвета.

Какие действия можно предпринять исходя из того что мы уже знаем о селекторах? Можно задать элементу <strong> красный цвет при помощи следующего стиля:

 

strong {color:#C00000;}

 

В html коде прописать следующее:

 

<p>Текст<strong>выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p>

 

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

Следующий способ это задать элементу <strong> свой класс. Например:

 

redstr {color:#C00000;}

 

В этом случае html код будет следующий:

 

<p>Текст<strong>выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p>

 

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

 

p strong {color:#C00000;}

 

Это обозначает, что тег <strong> находящийся внутри элемента <p> будет иметь красный цвет. HTML код в этом случае будет таким:

 

<p>Текст<strong>выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p>

 

Контекстный селектор

Контекстный селектор

Таким способом можно применять стили, к любому уровню вложенности тегов. Например можно сделать так:

 

td p strong {color:#C00000;}

 

Код будет следующий:

 

<table border="1"> <tr> <td><p>Текст<strong>выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p> </td> </tr> </table>

 

В этом случае текст, заключенный в тег <strong> будет выделен красным цветом, если он находится внутри тега <p>, который в свою очередь находится внутри тега <td>

Псевдоэлементы.

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

 

.bukv { color:#cc0000; font-size:36px;}
p {color:#666; font-size:14px;}

 

В этом случае код будет таким:

<p><span>П</span>ервая буква будет большая, а дальше пойдет нормальный текст</p>

 

В данном случае каждый раз нам придется прописывать к первой букве данный класс. Для того чтобы заглавная буква в каждом параграфе выделялась автоматически существует псевдоэлемент first-letter стили в этом случае будут такими:

 

p { color:#666; font-size:14px;}
p:first-letter { color:#cc0000; font-size:36px;}

 

Код будет таким:

 

<p>Первая буква будет большая, а дальше пойдет нормальный текст</p>

 

Сама буквица будет такой:

Псевдоэлементы

Псевдоэлементы

Селектор p:first-letter будет задавать стили всем первым буквам текста заключенного в теги <p></p> Для того чтобы текст обтекал букву слева данному селектору можно добавить свойство float:left В этом случае буквица окажется внутри текста.

Для выделения первых строк абзацев используется селектор first-line Применяется он аналогично селектору, который мы рассмотрели выше:

 

p { color:#666; font-size:14px;}
p: first-line { color:#cc0000; font-size:25px;}

 

Код будет таким:

 

<p>Первая строка будет выделена шрифтом размером 25 пикселей красного цвета <br> вторая строка <br> третья строка </p>

 

Теги <br> я добавил специально, чтобы перескочили строки, потому что в данном примере текста не много и если он раскинется на всю ширину экрана, то другие строчки вы не увидите. В результате у вас должно получиться следующее:

Псевдоэлементы

Псевдоэлементы

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

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

 

a:link {color:#548DD4}
a:visited {color:#666666}
a:hover {color:#B1030D}
a:active {color:#92D050}

 

В html коде записывается просто:

 

<a href="http://webmastermix.ru">Ссылка на сайт</a>

 

В результате не посещенная ссылка будет синей, посещенная серой, при наведении курсора мыши красной и активная, т. е. в момент нажатия зеленая.

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

 

a.sul:link {color:#548DD4}
a.sul:visited {color:#666666}
a.sul:hover {color:#B1030D}
a.sul:active {color:#92D050}

 

В теле документа к ссылке естественно необходимо добавить данный класс:

 

<a href=http://webmastermix.ru>Ссылка на сайт</a>

 

И последнее что нам необходимо разобрать в рамках данного урока это понятие группировка селекторов. Очень часто необходимо задать одно и то же оформление для разных элементов. В таком случае для того чтобы постоянно не переписывать одни и те же стили можно их назначить сразу нескольким элементам. Например:

 

p, td, h2 {color:#cc0000; font-size:16px;}

 

Т. е. селекторы перечисляются через запятую. Таким образом, можно указать какое угодно количество селекторов и задать им всем одинаковое оформление. В данном случае весь текст, заключенный в теги <p> <td> и <h2> будет отображен красным цветом размером 16 пикселей.

Как вы видите CSS селекторы дают огромное количество возможностей и вариантов оформления содержимого ваших страниц. Поэтому селекторы являются одним из самых важных элементов CSS.

Источник

CSS Selectors. Виды селекторов

Язык описания внешнего вида документа CSS постоянно развивается. Со временем растут не только его мощность и функциональность, повышаются также гибкость и удобство использования.

CSS selectors

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

  • универсальные;
  • для взаимодействия с псевдоклассами;
  • для управления псевдоэлементами.

Синтаксис прост. Чтобы научиться использовать CSS selectors, достаточно прочитать о них. Какой вариант лучше выбрать для контроля контента в вашем случае? Попробуем разобраться.

Селекторы тэгов

Это максимально простой вариант, который не требует особых знаний для записи. Чтобы управлять тегами, нужно использовать их название. Предположим, что «шапка» вашего сайта обернута в тег <header>. Для управления ею в CSS нужно использовать селектор header {}.

Достоинства — простота использования, универсальность.

Недостатки — полное отсутствие гибкости. В вышеописанном примере будут выбраны сразу все теги header. А что если нужно управлять только одним?

Селекторы класса

Самый распространенный вариант. Предназначен для управления тегами с атрибутом class. Предположим, в вашем коде есть три блока <div>, каждому из которых нужно задать определенный цвет. Как это сделать? Стандартные CSS selectors по тегам не подойдут, они указывают параметры для всех блоков сразу. Выход прост. Назначьте элементам класс. Например, первый div получил class=’red’, второй – class=’blue’, третий – class=’green’. Теперь их можно выбрать, используя таблицы CSS.

Синтаксис таков: указываем точку («.»), после которой пишем название класса. Чтобы управлять первым блоком, используем конструкцию .red. Вторым – .blue и так далее.

Важно! Рекомендуется использовать понятные значения атрибута class. Дурным тоном считается использование транслита (например, krasiviy-blok) или случайных комбинаций букв/цифр (ojfh834871). В таком коде вы обязательно запутаетесь, не говоря уже о том, с какими трудностями придется столкнуться тем, кто будет заниматься проектом после вас. Оптимальный вариант – использовать какую-нибудь методологию, вроде БЭМ.

Достоинства — довольно высокая гибкость.

Недостатки — у нескольких элементов может быть один и тот же класс, а значит, они будут редактироваться одновременно. Проблема решается использованием методологии, а также наследованием препроцессоров. Обязательно освойте less, sass или какой-нибудь другой препроцессор, они сильно упростят работу.

Селектор по ID

Насчет этого варианта мнения верстальщиков и программистов неоднозначны. Некоторые учебники CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Однако многие специалисты активно расставляют их по всей разметке. Решать вам. Синтаксис таков: символ решетки («#»), затем имя блока. Например, #red.

ID отличается от класса по нескольким параметрам. Во-первых, на странице не может быть двух одинаковых ID. Им назначаются уникальные имена. Во-вторых, такой селектор обладает более высоким приоритетом. Это значит, что если вы зададите блоку класс red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим.

Достоинства — можно управлять конкретным элементом, не обращая внимания на стили для тегов и классов.

Недостатки — легко запутаться в большом количестве ID и class.

Важно! Если вы пользуетесь методологией БЭМ (или ее аналогами), ID вам, в общем-то, не нужны. Такая техника верстки подразумевает использование уникальных классов, что гораздо удобнее.

Универсальный селектор

Синтаксис: знак зведочки («*») и фигурные скобки, т. е. *{}.

Используется для назначения определенных атрибутов сразу всем элементам страницы. Когда это может пригодиться? Например, если вы хотите задать странице свойство box-sizing: border-box. Может использоваться не только для управления всеми компонентами документа, но и для контроля всеми дочерними элементами определенного блока, например, div *{}.

Достоинства — можно управлять большим количеством элементов одновременно.

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

По атрибутам

Дают возможность управлять элементом с конкретным атрибутом. Например, у вас есть несколько тегов input с разным атрибутом type. Один из них – text, второй – password, третий – number. Конечно, можно задать каждому классы или ID, но это не всегда удобно. CSS selectors по атрибутам дают возможность указать значения для определенных тегов с максимальной точностью. Например, вот так:

input[type=’text’]{}

Этот селектор атрибутов выберет все input с типом text.

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

Представим, что на вашей странице есть input с атрибутом placeholder=“Введите имя“ и input placeholder=“Введите пароль“. Их также можно выбрать с помощью селектора! Для этого используется следующая конструкция:

input[placeholder=“Введите имя“]{} или input [placeholder=“Введите пароль“]

Возможна более гибкая работа с атрибутами. Допустим, у вас есть несколько тегов с похожими атрибутами title (скажем, «каспийский» и «каспийская»). Чтобы выбрать оба, используем следующие селекторы:

[title*=“каспийск“]

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

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

[title^=»нужный вам символ»] {}

или заканчиваются ими:

[title$=»нужный символ»] {}.

Достоинства — максимальная гибкость. Можно выбирать любые существующие элементы страницы без возни с классами.

Недостатки — используется относительно редко, только в специфических случаях. Многие верстальщики предпочитают методологии, поскольку указать класс бывает проще, чем расставлять многочисленные квадратные скобки и знаки «равно». Вдобавок, эти селекторы не работают в Internet Explorer версии 7 и ниже. Впрочем, кому сейчас нужны старые Internet Explorer?

Селекторы псевдоклассов

Псевдокласс обозначает состояние элемента. Например, :hover – то, что происходит с частью страницы при наведении курсора, :visited – посещенная ссылка. Сюда же входят элементы вроде :first-child и :last-child.

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

.btn:hover {

background-color: red;

}

Для красоты можно указать в основных свойствах этой кнопки свойство transition, например, в 0,5s – в таком случае кнопка будет краснеть не мгновенно, а в течение полусекунды.

Достоинства — активно используются для «оживления» страниц. Просты в применении.

Недостатки — их нет. Это действительно удобное средство. Однако неопытные верстальщики могут запутаться в обилии псевдоклассов. Проблема решается учебой и практикой.

Селекторы псевдоэлементов

«Псевдоэлементы» – это те части страницы, которых нет в HTML, но ими все равно можно управлять. Ничего не поняли? Все проще, чем кажется. Например, вы хотите сделать первую букву в строке большой и красной, оставив прочий текст маленьким и черным. Конечно, можно заключить эту букву в span с определенным классом, но это долго и скучно. Гораздо проще выделить весь абзац и использовать псевдоэлемент ::first-letter. Он дает возможность управлять внешним видом первой буквы.

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

Достоинства — дают возможность гибко настраивать внешний вид страницы.

Недостатки — новички в них часто путаются. Многие селекторы этого типа работают только в определенных браузерах.

Подведем итог

Селектор – мощное средство контроля потока документа. Благодаря ему можно выбрать абсолютно каждый компонент страницы (даже существующий лишь условно). Обязательно выучите все имеющиеся варианты или хотя бы запишите их. Это особенно важно, если вы создаете сложные страницы с современным дизайном и большим количеством интерактивных элементов.

Виды селекторов CSS

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

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

Давайте же ознакомимся с основными селекторами CSS.


Селекторы элементов (тегов)

Это самые простые и элементарные селекторы. При этом, селектором является определенный элемент или тег HTML страницы. Давайте посмотрим, как это выглядит на примере:

h2 {color: #36CFFF}

Здесь в качестве селектора выступает заголовок первого уровня, то есть тег <h2>, а все его содержимое имеет цвет «36CFFF».


Универсальные селекторы

С помощью данного селектора можно применить стили ко всем элементам веб-страницы. Например:

* {color: #000000}

Это правило делает содержимое всех элементов страницы черным цветом.


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

С их помощью можно изменять стили определенного элемента, только тогда, когда он находится внутри  другого элемента. К примеру:

ul em {color: #000000}

Таким образом, CSS применяется к тегу <em> только тогда, корда он находится внутри тега <ul>.


Селекторы классов

Они позволяют задать стили только к тем элементам, которые имеют одинаковые названия атрибута «class». Вот как это будет выглядеть html код:

<p>С помощью CSS этот текст будет черным</p>

А таким будет стиль:

.black {color: #000000}

Если же вы хотите, чтобы CSS применялся только к тегу <p>, то синтаксис будет таким:

p.black {color: #000000}

Примечание: для одного элемента можно применять несколько классов, например: <p>. Еще одним важным элементом есть то, что при прописывании стиля для класса, код начинается с точки. 


Селекторы идентификаторов

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

<h2>Заголовок 1-го уровня</h2>

CSS код будет следующим:

#myID {color: #000000}

Примечание: код стиля для идентификаторов начинается с решетки «#». 

Так же, как и в случае с селекторами классов, CSS можно прописать для идентификаторов определенного элемента:

h2#myID {color: #000000}


Групповые селекторы

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

h2, h3, h4 {color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase}


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



Ставив лайк Вы помогаете сайту 🙂 Статьи по теме:

Селекторы CSS и их виды

В данном уроке мы рассмотрим, что такое CSS селекторы (CSS Selectors), для чего они предназначены и чем они могут быть полезны при оформлении страниц.

Грамотное использование CSS селекторов позволяет не перегружать код, а также сделать его более логичным.

Материалы по теме:

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

Из урока Основы CSS вы уже знаете, что присвоение свойств тому или иному элементу задается при помощи правил. Структура правила имеет следующую конструкцию:

Как вы видите, селектором называется левая часть правила до фигурной скобки. Дальше идет блок объявления стилей который состоит из свойства и значения. Рассмотрим все особенности и виды селекторов по порядку.

CSS Селектор по элементу.

CSS Селекторами могут быть любые элементы html т. е. обычные теги. Например, зададим цвет и размер текста обрамленного в тег <p></p> т. е. цвет и размер абзаца текста.

 p {color:#666; font-size:12px;}

Т. е. в этом случае тег <p> является селектором. Таким же образом в качестве селектора можно использовать любые теги. В данном случае, цвет и размер текста задается тегу <p>, и все теги <p>, которые будут встречаться в коде страницы, будут иметь заданный размер и цвет текста.

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

CSS Селекторы классов.

Данные селекторы позволяют каждому тегу присвоить класс, который будет иметь свое определенно стилевое оформление. Присвоение класса тегу происходит следующим образом:<p> Где вместо «redmal» можно задавать любое другое слово или буквы.

Код стилей будет иметь следующий вид:

p {color:#666; font-size:12px;} 
p.redmal { color:#b50404; font-size:11px;}

Код этих абзацев в html файле будет следующий:

<p>Текст оформленный при помощи селектора p</p> 
<p>Текст оформленный при помощи селектора p.redmal</p>

Первый абзац, как и раньше, будет иметь серый текст размером 12 пикселей. Второй абзац будет иметь красный текст размером 11 пикселей.

Кроме этого данный класс можно применить не только к тегу <p> но и к любому другому элементу. Чтобы это стало возможным в стилях необходимо указать, что данный класс можно применять ко всем тегам. Для этого перед точкой элемент ставить не нужно. Например:

.redmal {color:#b50404; font-size:11px;}

Теперь этот класс можно применить как к тегу <p> так и к любому другому. Например, применим его и к абзацу и к ячейке таблицы:

<p>Текст оформленный при помощи селектора p</p> 
<p>Текст абзаца оформленный при помощи селектора .redmal</p> <table border="1">
<tr> 
<td>Текст помещенный в ячейку таблицы и оформленный при помощи селектора .redmal </td> 
</tr>
</table>

Можно так же придать разное оформление тегам с одним и тем же классом. В этом случае в стилях необходимо прописать следующее:

 p.redmal { color:#b50404; font-size:12px;} 
td.redmal { color:#666666; font-size:14px;}

При этом текст в теге <p> будет красный размером 12 пикселей, а в теге <td> серый размером 14 пикселей.

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

Это правило очень часто игнорируется потому, как все браузеры позволяют применять один и тот же ID к нескольким элементам. Главное отличие ID от класса в том, что в ID для адресации используется знак # а не точка. Например:

В HTML коде необходимо написать следующее:

<p>Текст оформленный при помощи ID p#sin</p>

Текст в абзаце будет синего цвета:

Контекстный селектор. Предположим, что нам необходимо в абзаце выделить текст тегом <strong></strong> т. е. как вам уже известно, из урока Форматирование текста в HTML, текст заключенный между этими тегами будет жирный. Но кроме того что он будет жирным нам необходимо чтобы он был например красного цвета.

Какие действия можно предпринять исходя из того что мы уже знаем о селекторах? Можно задать элементу <strong> красный цвет при помощи следующего стиля:

В html коде прописать следующее:

 <p>Текст<strong>выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p>

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

Следующий способ это задать элементу <strong> свой класс. Например:

В этом случае html код будет следующий:

<p>Текст<strong>выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p>

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

p strong {color:#C00000;}

Это обозначает, что тег <strong> находящийся внутри элемента <p> будет иметь красный цвет. HTML код в этом случае будет таким:

<p>Текст<strong>выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p>

Таким способом можно применять стили, к любому уровню вложенности тегов. Например можно сделать так:

td p strong {color:#C00000;}

Код будет следующий:

<table border="1"> <tr> <td><p>Текст<strong>выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p> </td> </tr> </table>

В этом случае текст, заключенный в тег <strong> будет выделен красным цветом, если он находится внутри тега <p>, который в свою очередь находится внутри тега <td>

Псевдоэлементы.

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

.bukv { color:#cc0000; font-size:36px;}
p {color:#666; font-size:14px;}

В этом случае код будет таким:

<p><span>П</span>ервая буква будет большая, а дальше пойдет нормальный текст</p>

В данном случае каждый раз нам придется прописывать к первой букве данный класс. Для того чтобы заглавная буква в каждом параграфе выделялась автоматически существует псевдоэлемент first-letter стили в этом случае будут такими:

p { color:#666; font-size:14px;}
p:first-letter { color:#cc0000; font-size:36px;}

Код будет таким:

<p>Первая буква будет большая, а дальше пойдет нормальный текст</p>

Сама буквица будет такой:

Селектор p:first-letter будет задавать стили всем первым буквам текста заключенного в теги <p></p> Для того чтобы текст обтекал букву слева данному селектору можно добавить свойство float:left В этом случае буквица окажется внутри текста.

Для выделения первых строк абзацев используется селектор first-line Применяется он аналогично селектору, который мы рассмотрели выше:

p { color:#666; font-size:14px;} 
p: first-line { color:#cc0000; font-size:25px;}

Код будет таким:

<p>Первая строка будет выделена шрифтом размером 25 пикселей красного цвета <br> вторая строка <br> третья строка </p>

Теги <br> я добавил специально, чтобы перескочили строки, потому что в данном примере текста не много и если он раскинется на всю ширину экрана, то другие строчки вы не увидите. В результате у вас должно получиться следующее:

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

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

a:link {color:#548DD4} 
a:visited {color:#666666} 
a:hover {color:#B1030D} 
a:active {color:#92D050}

В html коде записывается просто:

<a href="http://webmastermix.ru">Ссылка на сайт</a>

В результате не посещенная ссылка будет синей, посещенная серой, при наведении курсора мыши красной и активная, т. е. в момент нажатия зеленая.

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

a.sul:link {color:#548DD4} 
a.sul:visited {color:#666666} 
a.sul:hover {color:#B1030D} 
a.sul:active {color:#92D050}

В теле документа к ссылке естественно необходимо добавить данный класс:

<a href=http://webmastermix.ru>Ссылка на сайт</a>

И последнее что нам необходимо разобрать в рамках данного урока это понятие группировка селекторов. Очень часто необходимо задать одно и то же оформление для разных элементов. В таком случае для того чтобы постоянно не переписывать одни и те же стили можно их назначить сразу нескольким элементам. Например:

p, td, h2 {color:#cc0000; font-size:16px;}

Т. е. селекторы перечисляются через запятую. Таким образом, можно указать какое угодно количество селекторов и задать им всем одинаковое оформление. В данном случае весь текст, заключенный в теги <p> <td> и <h2> будет отображен красным цветом размером 16 пикселей.

Как вы видите CSS селекторы дают огромное количество возможностей и вариантов оформления содержимого ваших страниц. Поэтому селекторы являются одним из самых важных элементов CSS.

Материал подготовлен порталом: webmastermix.ru

Рекомендуем ознакомиться:

Подробности

Опубликовано: 10 Февраль 2010

Обновлено: 04 Сентябрь 2013

Просмотров: 21594

Виды селекторов CSS Классы идентификаторы и селекторы тегов Основы CSS

Продолжаем знакомство с CSS, которое мы начали в статье «Структура CSS.  Синтаксис и подключение CSS» .
Сегодня рассмотрим виды селекторов и другие элементы CSS с их атрибутами.
Классы
Классы используют, если нужно определить стиль для одного элемента веб-страницы или применить разные стили для одного тега.
Для указания в коде HTML-документа, что тег применяется с каким-то определенным стилем, к определяемому тегу добавляют параметр. Класс записывают внутри скобок стилевой таблицы. Сначала пишется нужный тег, а за ним, через точку пользовательское имя класса Рассматривая примеры, будем использовать таблицы глобальных стилей, для сокращения статей. Но держа в уме, что стили правильнее и удобнее записывать в отдельном файле. И так, пример использования классов:

<html>
<head>
<title>Примнение классов и селекторов тегов.</title>
<style type=»text/css»>
P {
text-align: center;
}
P.exp {
text-align: right;
color: red;
font-style: italic;
font-weight:  bold;
}
</style>
</head>
<body>

<p>Простой параграф. Текст выравнен по центру.</p>

<p>По определению класса «exp» — текст выравнялся по правому краю, стал красным курисовом и обрел большую толщину.</p>

</body>
</html>

На рисунке Вы видите использование класса «exp» для изменения отображения параграфа.
Также в этом примере используется ещё один вид селекторов — Селектор Тегов. В примере в его роли выступает селектор тега Р.
В роли такого селектора может выступать любой тег HTML, которому необходимо определить правила форматирования. К таким правилам можно отнести такие как: цвет, фон, размер и другие.

Идентификаторы — следующий вид селекторов, который используется для изменнения только одного элемента, придавая этому элементу уникальное имя. Последняя особенность позволяет применять идентификаторы для обращения к ним посредством скриптов, для динамическог измененния веб-элементов. Синтаксис написания также сходен с классами, но вместо точки перед именем идентификатора ставится знак #.

К идентификатору обращаются аналогично классам, но вместо ключевого слова используется параметр id. А значением оного выступает имя идентификатора. Символ решетки в этот момент уже не указывают. Пример:

<html>
<head>
<title>Идентификаторы</title>
<style type=»text/css»>
P {
text-align: center;
}
#exp {
text-align: right;
color: white;
background-color: #3366CC;
font-weight: bold;
}
</style>
</head>
<body>

<p>Простой параграф. Текст выравнен по центру.</p>

<p>По определению идентификатора «exp» — текст выравнялся по правому краю, стал белым на синем фоне и обрел большую толщину.</p>

</body>
</html>

Универсальный селектор

Когда необходимо установить одновременно одинаковый стиль для всех элементов веб-документа, используют универсальный селектор, соответствующий любому элементу веб-страницы. Для его обозначения применяют символ звездочки (*) и обычно синтаксис бывает таким: * { Описание правил стиля }.

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

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

Соседние селекторы
Соседними называют веб-элементы, которые расположены рядом друг с другом, и следуют один за другим, например: <div><b></b><i></i></div> . В приведённом примере соседними являются теги <b> и <i>. Родительские и дочерние элементы не относятся к соседним.

Для задания стилей соседних элементов применяют символ плюса (+), который вставляют между двумя селекторами. Синтаксис написания стилей соседних селекторов следующий: 1селектор  + 2селектор { Описание правил стиля }. Использовать вокруг знака «+» пробелы не является обязательным.

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

<html>
<head>
<title>Cоседние селекторы</title>
<style type=»text/css»>
I + B {
color: red;
}
</style>
</head>
<body>
<p><i>Изменение цвета с применением способа </i><b>соселнего селектора</b></p>
<p>Изменение цвета с применением способа <b>соселнего селектора</b> не происходит из-за отсутствия самого соседства.</p>
</body>
</html>

С помощью данного способа задания стилей можно добиться применение стиля к элементу следующему строго за определённым предыдущим. В нашем примере цвет тега <b> меняется только в том случае, если он следует за соседним тегом <i>, и никогда иначе. Данный способ применяется редко т.к. не поддерживается браузером  Internet Explorer.

Дочерние селекторы

Принцип вложенности веб-элементов нам знаком из изучения языка HTML. Дочерние селекторы в CSS понятие несколько иное.
Дочерним считается такой селектор, который расположен прямо внутри родительского элемента. Если в свою очередь, родительский элемент тоже вложен в другой тег, то более высокий по иерархии элемент, первому родительским не является. Синтаксис задания этих селекторов следующий:

1селектор > 2селектор { Описание правил стиля для 2-ого селекрора }

Стиль будет применён ко 2-му селектору, но только тогда, когда он является дочерним для 1-ого селектора.

Рассмотрим применение Дочернего селектора на примере:

<html>
<head>
<title> Дочерние селекторы</title>
<style type=»text/css»>
DIV > P {
color: red;
}
</style>
<body>
<div>
<p>Красный цвет текста только у параграфа, вложенного в тег DIV</p>
</div>
<p>У этого параграфа цвет по-умолчанию , т.к. он не является дочерним для тега DIV</p>
</body>
</html>

По тексту на рисунке виден смысл применения соседних селекторов. Данный способ также применяется редко т.к. не поддерживается браузером  Internet Explorer.

Применение стилей к селекторам атрибутов и контекстным селекторам рассмотрим отдельно.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *