{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"56ujj"},{"data":{"image":{"id":"5ce80b7eda618900b37d302f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"atomic:image","key":"23hus"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этой статье мы разберём различные виды селекторов. У каждого из них своя задача и каждый срабатывает лишь при соблюдении условий, и по этим условиям делятся на несколько видов:","type":"unstyled","key":"dkga9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":3,"style":"BOLD"}],"text":"1) Обычный селектор.","type":"unstyled","key":"bq4no"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":3,"style":"BOLD"}],"text":"2) Контекстный селектор.","type":"unstyled","key":"a2jsn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":3,"style":"BOLD"}],"text":"3) Селектор ID.","type":"unstyled","key":"fsamn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":3,"style":"BOLD"}],"text":"4) Селектор CLASS.","type":"unstyled","key":"cqld7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":3,"style":"BOLD"}],"text":"5) Селектор параметров.","type":"unstyled","key":"6n8bo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":10,"style":"BOLD"},{"length":8,"offset":107,"style":"BOLD"}],"text":"Обсуждать обычный селектор мы не будем, потому что, во-первых, мы его обсуждали, а, во-вторых, это обычный HTML-тег, поэтому тут и сказать нечего.","type":"unstyled","key":"7jlls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":27,"style":"BOLD"}],"text":"А теперь подробно разберём контекстные селекторы, так как их используют, пожалуй, чаще всего. Они нужны для того, чтобы к элементу применялся стиль при условии, что данный элемент лежит внутри тега, который лежит внутри другого тега. Звучит запутанно, не спорю, но давайте разберёмся на примере","type":"unstyled","key":"ahpbb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Заголовок в контейнере

","type":"unstyled","key":"20k25"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":38,"style":"ITALIC"},{"length":4,"offset":75,"style":"BOLD"},{"length":5,"offset":117,"style":"BOLD"}],"text":"Элемент, в данном случае - это текст \"заголовок в контейнере\" лежит в теге

, который в свою очередь лежит в теге
. Этот пример поясняет то, что я написал чуть выше. А теперь вернёмся к контекстным селекторам. Синтаксис следующий:","type":"unstyled","key":"emj7g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"тег1 тег2 {\n свойство1: значение1;\n свойство2: значение2;\n}","type":"unstyled","key":"dgtoa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":25,"style":"ITALIC"},{"length":6,"offset":47,"style":"ITALIC"},{"length":5,"offset":74,"style":"ITALIC"},{"length":9,"offset":87,"style":"ITALIC"},{"length":9,"offset":99,"style":"ITALIC"},{"length":9,"offset":123,"style":"ITALIC"},{"length":9,"offset":135,"style":"ITALIC"},{"length":3,"offset":162,"style":"BOLD"}],"text":"И работает это так: если тег2 находится внутри тега 1, то элементы внутри тега2 примут свойства1 и свойства2 со значениями значение1 и значение2. А теперь пример CSS для примера выше.","type":"unstyled","key":"3msog"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div h2 {\n font-weight: bold;\n}","type":"unstyled","key":"9ocoe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":45,"style":"ITALIC"}],"text":"Такой стиль будет применён к примеру выше и \"заголовок в контейнере\" станет жирным. А если будет написано просто:","type":"unstyled","key":"cjap0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Заголовок
","type":"unstyled","key":"f9mmv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":78,"style":"BOLD"}],"text":"То стиль применён к этому элементу не будет, ведь он не находится внутри тега
.","type":"unstyled","key":"64ka"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":26,"style":"BOLD"},{"length":5,"offset":179,"style":"BOLD"},{"length":3,"offset":186,"style":"BOLD"},{"length":4,"offset":191,"style":"BOLD"},{"length":4,"offset":197,"style":"BOLD"},{"length":7,"offset":203,"style":"BOLD"},{"length":21,"offset":336,"style":"BOLD"}],"text":"Вопрос: для чего же нужны контекстные селекторы? Их Вы будете вынуждены использовать многократно, ввиду того, что на Вашей странице наверняка будет множество повторяющихся тегов (
,
, , ,
и прочие), и, разумеется, Вы захотите, чтобы у них был далеко не всегда одинаковый внешний вид. И вот тут и придут на помощь контекстные селекторы.","type":"unstyled","key":"17mlp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Селекторы ID тоже очень распространены. Они позволяют задать уникальный элемент на странице, и синтаксис объявления этого селектора следующий:","type":"unstyled","key":"dqal5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"имятега#имя {\n свойство1: значение1;\n свойство2: значение2;\n}","type":"unstyled","key":"2an91"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":18,"style":"ITALIC"},{"length":2,"offset":42,"style":"ITALIC"},{"length":3,"offset":60,"style":"ITALIC"},{"length":7,"offset":94,"style":"ITALIC"}],"text":"Теперь если тегу \"имятега\" имеет атрибут \"id\" со значением \"имя\", то к элементам внутри тега \"имятега\" будет применён стиль.","type":"unstyled","key":"5t1u7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":6,"style":"ITALIC"},{"length":2,"offset":154,"style":"ITALIC"},{"length":3,"offset":170,"style":"ITALIC"}],"text":"Если \"имятега\" отсутствует (то есть селектор начинается с символа \"#\"), то тогда данный стиль может быть применён к любым тегам, у которых стоит атрибут \"id\" в значении \"имя\".","type":"unstyled","key":"4roiu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А теперь пример:","type":"unstyled","key":"asrs1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#red {\n color: red;\n}","type":"unstyled","key":"9f5tk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":9,"style":"BOLD"}],"text":"И теперь HTML-код, к которому будет применён данный стиль:","type":"unstyled","key":"5ob06"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Красный текст
","type":"unstyled","key":"bb7ko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":55,"style":"BOLD"},{"length":47,"offset":71,"style":"BOLD"}],"text":"Как видите, всё очень просто, однако есть одно большое НО! Используйте ОДИН идентификатор только ОДИН РАЗ на странице! Например, вот так писать нельзя:","type":"unstyled","key":"36a99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Красный текст
\n
Ещё один красный текст
","type":"unstyled","key":"els6s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В таких случаях надо создавать два идентификатора вот так:","type":"unstyled","key":"c40ht"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#red1, #red2 {\n color: red;\n}","type":"unstyled","key":"2mnnq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":2,"style":"BOLD"}],"text":"И HTML-код:","type":"unstyled","key":"cqj8s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Красный текст
\n
Ещё один красный текст
","type":"unstyled","key":"dlpru"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот теперь будет правильно. Кстати, обратите внимание на \"запятую\" в описании селектора. Это частый приём для сокращения количества строк в стиле. Если у Вас два или более элемента имеют один и тот же стиль, то Вы можете через запятую перечислить все селекторы, а потом сразу для всех написать соответствующий стиль, как в примере выше.","type":"unstyled","key":"5b4nm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":9,"style":"BOLD"},{"length":11,"offset":44,"style":"BOLD"}],"text":"Теперь о селекторе CLASS. Он очень похож на селектор ID, но его \"имя\" может использоваться несколько раз на странице. Общий синтаксис этого селектора следующий:","type":"unstyled","key":"3k41h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"имятега.имя {\n свойство1: значение1;\n свойство2: значение2;\n}","type":"unstyled","key":"fc9cv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":28,"style":"ITALIC"},{"length":5,"offset":52,"style":"ITALIC"},{"length":3,"offset":73,"style":"ITALIC"}],"text":"Таким образом, если у тега \"имятега\" стоит атрибут \"class\" со значением \"имя\", то к элементам внутри будет применён данный стиль.","type":"unstyled","key":"4g5jl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":14,"style":"BOLD"},{"length":7,"offset":35,"style":"ITALIC"}],"text":"Аналогично, с селектором ID, если \"имятега\" не задано (то есть описание селектора начинается с символа \".\"), то данный стиль может быть присвоен любым элементам.","type":"unstyled","key":"5smp5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А теперь пример:","type":"unstyled","key":"40rrc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".red {\n color: red;\n}","type":"unstyled","key":"e1pal"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":2,"style":"BOLD"}],"text":"И HTML-код под этот стиль:","type":"unstyled","key":"969tc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Красный текст
\n
Ещё один красный текст
","type":"unstyled","key":"1gjdk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":65,"style":"BOLD"},{"length":10,"offset":158,"style":"BOLD"},{"length":2,"offset":205,"style":"BOLD"}],"text":"Вновь всё очень просто. Теперь встаёт вопрос: чем же тогда лучше селектор ID? А лучше он тем, что к данным элементам очень удобное обращение через, например, JavaScript. Поэтому очень удобно задать именно ID, при условии, что такой элемент всего один на странице, то есть он является уникальным.","type":"unstyled","key":"ciiaq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":16,"style":"BOLD"},{"length":19,"offset":37,"style":"BOLD"},{"length":7,"offset":248,"style":"BOLD"}],"text":"И последний тип селекторов CSS - это селектор параметров. Не очень часто используют, но в некоторых случаях он является практически незаменимым. Я, надеюсь, что Вы заметили, что вид многих тегов зависит от их атрибутов. Ярким примеров является тег , который может быть и кнопкой, и переключателем, и текстовым полем. Согласитесь, что выглядят все эти элементы совершенно по-разному, однако, отвечает за них один и тот же тег. И для того, чтобы применять стиль лишь при определённом значении какого-либо атрибута, и используют селекторы параметров. Синтаксис следующий","type":"unstyled","key":"ecp16"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"имятега[имяатрибута=\"значениеатрибута\"] {\n свойство1: значение1;\n свойство2: значение2;\n}","type":"unstyled","key":"dmcop"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Применяется данный стиль в следующем случае: если в теге \"имятега\" значение \"имяатрубита\" равно \"значениеатрибута\" то будет применён стиль, в противном случае стиль не применяется.","type":"unstyled","key":"4kdgm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы стало ещё понятнее, привожу пример:","type":"unstyled","key":"45ov5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"input[type=\"submit\"] {\n border: 2px double black;\n}","type":"unstyled","key":"41eai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":2,"style":"BOLD"}],"text":"И HTML:","type":"unstyled","key":"am20p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"unstyled","key":"1u0hr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":71,"style":"BOLD"},{"length":3,"offset":116,"style":"BOLD"}],"text":"Надеюсь, что и здесь всё прозрачно. Ещё один очень важный момент, виды селекторов можно совмещать, например, данный CSS вполне нормальный и рабочий:","type":"unstyled","key":"32clr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#header li a {\n font-size: 150%;\n}","type":"unstyled","key":"b403r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":2,"style":"BOLD"}],"text":"И HTML-код, который вызовет этот стиль:","type":"unstyled","key":"beko0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
\n
\n Текст с размером 150%\n
\n
","type":"unstyled","key":"e1la1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Думаю, что и здесь вопросов не возникнет.","type":"unstyled","key":"8dmjd"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":10,"offset":48},{"key":1,"length":20,"offset":92}],"inlineStyleRanges":[{"length":9,"offset":32,"style":"BOLD"},{"length":9,"offset":134,"style":"BOLD"}],"text":"Напоследок хочется сказать, что селекторы - это основа CSS, которую обязан знать любой, кто создаёт сайты с нуля. А как применять эти селекторы - это уже зависит только от Ваших дизайнерских навыков.","type":"unstyled","key":"1h4lu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"mZMUrswvdT5oO4u7M9pO"}],"entityMap":{"0":{"data":{"href":"http://myrusakov.ru/css-osnovy.html","url":"http://myrusakov.ru/css-osnovy.html"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"http://myrusakov.ru/","url":"http://myrusakov.ru/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}