Селекторы CSS
В этой статье мы разберём различные виды селекторов. У каждого из них своя задача и каждый срабатывает лишь при соблюдении условий, и по этим условиям делятся на несколько видов:
1) Обычный селектор.
2) Контекстный селектор.
3) Селектор ID.
4) Селектор CLASS.
5) Селектор параметров.
Обсуждать обычный селектор мы не будем, потому что, во-первых, мы его обсуждали, а, во-вторых, это обычный HTML-тег, поэтому тут и сказать нечего.
А теперь подробно разберём контекстные селекторы, так как их используют, пожалуй, чаще всего. Они нужны для того, чтобы к элементу применялся стиль при условии, что данный элемент лежит внутри тега, который лежит внутри другого тега. Звучит запутанно, не спорю, но давайте разберёмся на примере
<div><h2>Заголовок в контейнере</h2></div>
Элемент, в данном случае - это текст "заголовок в контейнере" лежит в теге <h2>, который в свою очередь лежит в теге <div>. Этот пример поясняет то, что я написал чуть выше. А теперь вернёмся к контекстным селекторам. Синтаксис следующий:
тег1 тег2 {
свойство1: значение1;
свойство2: значение2;
}
И работает это так: если тег2 находится внутри тега 1, то элементы внутри тега2 примут свойства1 и свойства2 со значениями значение1 и значение2. А теперь пример CSS для примера выше.
div h2 {
font-weight: bold;
}
Такой стиль будет применён к примеру выше и "заголовок в контейнере" станет жирным. А если будет написано просто:
<h2>Заголовок</h2>
То стиль применён к этому элементу не будет, ведь он не находится внутри тега <div>.
Вопрос: для чего же нужны контекстные селекторы? Их Вы будете вынуждены использовать многократно, ввиду того, что на Вашей странице наверняка будет множество повторяющихся тегов (<div>, <p>, <tr>, <td>, <table> и прочие), и, разумеется, Вы захотите, чтобы у них был далеко не всегда одинаковый внешний вид. И вот тут и придут на помощь контекстные селекторы.
Селекторы ID тоже очень распространены. Они позволяют задать уникальный элемент на странице, и синтаксис объявления этого селектора следующий:
имятега#имя {
свойство1: значение1;
свойство2: значение2;
}
Теперь если тегу "имятега" имеет атрибут "id" со значением "имя", то к элементам внутри тега "имятега" будет применён стиль.
Если "имятега" отсутствует (то есть селектор начинается с символа "#"), то тогда данный стиль может быть применён к любым тегам, у которых стоит атрибут "id" в значении "имя".
А теперь пример:
#red {
color: red;
}
И теперь HTML-код, к которому будет применён данный стиль:
<p id = "red">Красный текст</p>
Как видите, всё очень просто, однако есть одно большое НО! Используйте ОДИН идентификатор только ОДИН РАЗ на странице! Например, вот так писать нельзя:
<p id = "red">Красный текст</p>
<p id = "red">Ещё один красный текст</p>
В таких случаях надо создавать два идентификатора вот так:
#red1, #red2 {
color: red;
}
И HTML-код:
<p id = "red1">Красный текст</p>
<p id = "red2">Ещё один красный текст</p>
Вот теперь будет правильно. Кстати, обратите внимание на "запятую" в описании селектора. Это частый приём для сокращения количества строк в стиле. Если у Вас два или более элемента имеют один и тот же стиль, то Вы можете через запятую перечислить все селекторы, а потом сразу для всех написать соответствующий стиль, как в примере выше.
Теперь о селекторе CLASS. Он очень похож на селектор ID, но его "имя" может использоваться несколько раз на странице. Общий синтаксис этого селектора следующий:
имятега.имя {
свойство1: значение1;
свойство2: значение2;
}
Таким образом, если у тега "имятега" стоит атрибут "class" со значением "имя", то к элементам внутри будет применён данный стиль.
Аналогично, с селектором ID, если "имятега" не задано (то есть описание селектора начинается с символа "."), то данный стиль может быть присвоен любым элементам.
А теперь пример:
.red {
color: red;
}
И HTML-код под этот стиль:
<p class = "red">Красный текст</p>
<p class = "red">Ещё один красный текст</p>
Вновь всё очень просто. Теперь встаёт вопрос: чем же тогда лучше селектор ID? А лучше он тем, что к данным элементам очень удобное обращение через, например, JavaScript. Поэтому очень удобно задать именно ID, при условии, что такой элемент всего один на странице, то есть он является уникальным.
И последний тип селекторов CSS - это селектор параметров. Не очень часто используют, но в некоторых случаях он является практически незаменимым. Я, надеюсь, что Вы заметили, что вид многих тегов зависит от их атрибутов. Ярким примеров является тег <input>, который может быть и кнопкой, и переключателем, и текстовым полем. Согласитесь, что выглядят все эти элементы совершенно по-разному, однако, отвечает за них один и тот же тег. И для того, чтобы применять стиль лишь при определённом значении какого-либо атрибута, и используют селекторы параметров. Синтаксис следующий
имятега[имяатрибута="значениеатрибута"] {
свойство1: значение1;
свойство2: значение2;
}
Применяется данный стиль в следующем случае: если в теге "имятега" значение "имяатрубита" равно "значениеатрибута" то будет применён стиль, в противном случае стиль не применяется.
Чтобы стало ещё понятнее, привожу пример:
input[type="submit"] {
border: 2px double black;
}
И HTML:
<input type = "submit" value = "Кнопка с двойной чёрной рамкой">
<input type = "button" value = "Другая кнопка">
Надеюсь, что и здесь всё прозрачно. Ещё один очень важный момент, виды селекторов можно совмещать, например, данный CSS вполне нормальный и рабочий:
#header li a {
font-size: 150%;
}
И HTML-код, который вызовет этот стиль:
<ul id = "header">
<li>
<a href = "http://myrusakov.ru">Текст с размером 150%</a>
</li>
</ul>
Думаю, что и здесь вопросов не возникнет.
Напоследок хочется сказать, что селекторы - это основа CSS, которую обязан знать любой, кто создаёт сайты с нуля. А как применять эти селекторы - это уже зависит только от Ваших дизайнерских навыков.
-
- Михаил Русаков
Комментарии (24):
Здравствуйте. прочитал статью о селекторах CSS и озадачился вопросом: может ли имя класса/ID состоять из 2х и боле слов? и если может, то можно ли брать его в какие-нибудь кавычки в случае описания стиля, содержжащего контекстные или соседние селекторы? Заранее спасибо.
Ответить
Безусловно, можно. Например такое имя MyName. Но только важно, чтобы между словами не было пробелов и чтобы в имени не было различных спецсимволов. Никаких кавычек не нужно.
Ответить
А на этом сайте точно все материалы о языках HTML, CSS, Java, PHP?
Ответить
Нет, конечно. Чтобы были все материалы по всем этим языкам, потребуется не меньше 10 лет ежедневного написания. Никто полностью эти языки не знает. Да это и не нужно. По Java здесь вообще ничего нет. Здесь только по JavaScript.
Ответить
Извините за тупой вопрос, но как сделать отступ текста от блока? Я просто совсем эту тему забыл...
Ответить
Отступ делается с помощью padding.
Ответить
Но у меня тогда растягивается сам блок но отступы внутри появляются...А как сделать чтобы блок не растягивался?
Ответить
Делайте тогда фиксированные размеры блока.
Ответить
Ну у меня и так 2 сайдбара по 200 пикс. А если я делаю паддинг то у меня они один на один залазят
Ответить
Контекстный селектор Тег1 Тег2 { ... } применяет стиль к Тег2. А как применить стиль к Тег1, если в нем есть Тег2 ?
Ответить
Никак не получится. Поэтому выход только один - обратиться как-то иначе, например, поставить селектор ID или CLASS.
Ответить
Если не уделить время и не разобраться с работой селекторов,то изучить CSS довольно сложно. Хочу поделиться своим опытом. Создайте простой одностраничный сайт на блоках и на этом,своём сайте, изучайте CSS. Наскоком изучить CSS нельзя,уделите этому изучению какое то время и во время изучения не отвлекайтесь на другие вопросы.
Ответить
Михаил, из-за чего могут не работать селекторы параметров в IE9. В Мозиле всё отлично работает.
Ответить
В IE9 всё работает, поэтому проблема конкретно с Вашим браузером, либо какие-то свойства специфичные применяете, попробуйте с тривиальным чем-нибудь, например, font-size или color.
Ответить
Привет михаил! Получилось задействовать селекторы параметров путём прямого указания на файл стиля во вкладке:свойства обозревателя/общие/оформление. Но никак не получается автоматически выполнить эти свойства. Два дня уже бьюсь над этим :-) Может есть соображения, где этот флажок найти?
Ответить
Подскажите пожалуйста, по незнанию написала код через селекторы ID, сказали все заменить на Class. Когда меняю разваливается вся страница?Что делать ? писать весь код заново через классы?
Ответить
Внимательно надо всё исправлять, больше тут писать нечего.
Ответить
Есть отличия в кодах цветов в html и и а css у меня почему-то свет #E6E6FA в html и в css по разному выглядит. А большинство вабще не отображаются. Может там только словами задавать можно ? style="background-color:green"
Ответить
Все цвета лучше задавать через CSS, и лучше кодом, а не словами.
Ответить
Извините за тупой вопрос, но куда нужно поместить CSS file для его функционирования?(у меня в той же папке что и HTML file - не работает...) Помогите новичку!!! Спасите!!! P.S Автору сайта огромное СПАСИБО!!!
Ответить
Вам нужно поместить файл в любое место,в идеале в ту же папку,где и html документ,и потом подключить его в самом html документе
Ответить
Мой html <html> <head> <b>MidLate</b> <link rel="stylesheet" type="text/css" href="MidLate.css"> </head> <body> <div id="main"> <img name = "img" src="http://abali.ru/wp-content/uploads/2013/03/razbitoe_steklo.png"/> </div> </body> </html> мой css body { background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgba(148,179,222,1)), color-stop(27%,rgba(174,199,236,1)), color-stop(64%,rgba(204,219,242,1))); margin-left: auto; margin-right: auto; } b { background-color: #6acccc; } #main { height: 200 px; width: 300 px; } Стиль для id не срабатывает. При этом для body срабатывает. В чем может быть причина? Уже кучу инфы перерыл - такое чувство, что эта проблема только у меня
Ответить
Не работает селектор параметров! Вот код HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>MySite</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style2.css"> </head> <body> <form name="myform" action="#" method="post"> <div> <input type="text" name="name" /> </div> </form> </body> </html> А вот код CSS из файла style2.css: input [type="text"] { color: #f00; } больше никакого лишнего кода нигде нет и ничего не работает. Битый час смотрю уже примеры на других разных сайтах, вроде всё должно работать, а не работает. Почему?
Ответить
Здравствуйте, не работает только селектор параметров при запуске в браузере IE8, всё остальное работает. Если запускать из Notepad++ Запуск\ Launch IE, то работают все селекторы и параметров тоже. Подскажите, пожалуйста, в чём может быть причина.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.