{"draftJsState":{"blocks":[{"data":{"image":{"id":"682b65465a881453f0e13267"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS стили - это классика","type":"atomic:image","key":"cvv7h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":160,"style":"BOLD"},{"length":19,"offset":209,"style":"BOLD"},{"length":14,"offset":233,"style":"BOLD"},{"length":19,"offset":268,"style":"BOLD"}],"text":"CSS при первом знакомстве выглядит не таким уж и сложным. Но что с этим всем делать чтобы было и красиво и правильно не понятно — особенно когда речь заходит о css селекторах. Сразу и не поймешь что выбрать — селектор класса CSS или селектор по ID? Когда использовать селекторы тегов CSS, а когда комбинированные? И как разобраться в специфичности и приоритете?","type":"unstyled","key":"4vqno"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":67,"style":"BOLD"}],"text":"В этом руководстве постарался разложить всё по полочкам: что такое селекторы CSS, какие бывают их виды, как они работают и как не запутаться в применении стилей. И как всегда - на примерах.","type":"unstyled","key":"dvscc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое селекторы CSS","type":"header-two","key":"cc8uv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Селекторы CSS — это основа любой стилизации в веб-разработке. Они позволяют выбрать нужные HTML-элементы на странице и применить к ним стили: задать цвет, шрифт, отступы и многое другое.","type":"unstyled","key":"4ppe6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":14,"style":"BOLD"}],"text":"Проще говоря, селектор — это указатель на то, к какому элементу должны применяться CSS-правила. Например:","type":"unstyled","key":"f1g1k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"h1 {","type":"blockquote","key":"d3koj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: blue;","type":"blockquote","key":"bqfuj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"cf9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":15,"style":"BOLD"}],"text":"Здесь h1 — это селектор тегов CSS, который выбирает все заголовки первого уровня.","type":"unstyled","key":"7n5pa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"},{"length":10,"offset":26,"style":"BOLD"},{"length":30,"offset":48,"style":"BOLD"}],"text":"CSS селекторы размещают в CSS-файлах или внутри тегов ","type":"blockquote","key":"eroai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если стилей немного, можем прописать их прямо в нашем документе перед основным контентом. Но если дизайн сложный, так лучше не делать, а выносить стили во внешний файл.","type":"unstyled","key":"e1d7s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":3,"style":"BOLD"}],"text":"3. В атрибуте style (не рекомендуется):","type":"unstyled","key":"67mu5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Текст

","type":"blockquote","key":"o3a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Исчезающая практика. Сгодится, если файл небольшой и надо украсить всего пару элементов. Какой-нибудь счёт на оплату или заглушка 404 на самописный сайт, к примеру.","type":"unstyled","key":"8kdra"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обычно селекторы размещают во внешнем CSS-файле — так чище и удобнее для масштабирования.","type":"unstyled","key":"55bum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зачем знать про селекторы CSS","type":"header-two","key":"5to6d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы дизайнер, то вопрос не уместный. Но если бэкэндер, то для общего развития есть необходимый минимум. Давайте разберемся чо дейсвительно надо понимать. ","type":"unstyled","key":"el4lc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":26,"style":"BOLD"}],"text":"Во-перевых. Без понимания css селекторов невозможно правильно стилизовать страницу. Ошибки в выборе селектора могут привести к тому, что стили:","type":"unstyled","key":"1iuh3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"не будут применяться вовсе;","type":"unordered-list-item","key":"ftic5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"применятся ко всем элементам подряд;","type":"unordered-list-item","key":"cqeti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"приведут к конфликтам и хаосу в оформлении.","type":"unordered-list-item","key":"5nshm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":18,"style":"BOLD"},{"length":10,"offset":45,"style":"BOLD"},{"length":13,"offset":58,"style":"BOLD"}],"text":"Во-вторых. Знание свойств селекторов CSS, их приоритета и специфичности позволяет:","type":"unstyled","key":"3kav4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"точно управлять стилями;","type":"unordered-list-item","key":"40thj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"упрощать поддержку кода;","type":"unordered-list-item","key":"8rt8c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"создавать масштабируемые и чистые стили.","type":"unordered-list-item","key":"edh0f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В работе в коммерческих проектах знание данной темы просто обязательно.","type":"unstyled","key":"6frab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее коснемся основных понятий, связанных с селекторами. В основном, для того, чтобы понимать в каких направлениях можно развиваться далее, чтобы более глубоко изучить тему.","type":"unstyled","key":"7c5ej"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Селектор и HTML-тег: базовый уровень","type":"header-two","key":"8s8c9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":28,"style":"BOLD"},{"length":16,"offset":51,"style":"BOLD"}],"text":"Один из самых простых — это селектор HTML CSS, или селектор по тегу. Пример:","type":"unstyled","key":"12ehi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"p {","type":"blockquote","key":"ffkj5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: red;","type":"blockquote","key":"jnu3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"13rsu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":10,"style":"BOLD"}],"text":"Здесь p — селектор элементов CSS, который выбирает все абзацы

. Это фундаментальный способ применения стилей на старте. В принципе, этим можно было бы и обойтись, если документ не большой.","type":"unstyled","key":"8lsrr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если проект более-менее сложный, понадобятся более продвинутые инструменты. О них далее.","type":"unstyled","key":"5avdi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS селекторы: примеры и виды","type":"header-two","key":"8bl58"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":23,"style":"BOLD"}],"text":"Разберём основные типы селекторов стилей CSS с примерами:","type":"unstyled","key":"6gcs5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Селектор класса CSS","type":"header-three","key":"fkbb9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".menu {","type":"blockquote","key":"6f05c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"font-weight: bold;","type":"blockquote","key":"2289p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"e0c0s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выбирает все элементы с классом menu. Один из самых часто используемых типов.","type":"unstyled","key":"fnaan"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":64,"style":"BOLD"}],"text":"А вот так элемент будет выглядеть в коде документа:

","type":"unstyled","key":"cjn3f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Видим имя класса в теге. к нему и применится стиль.","type":"unstyled","key":"4l29r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. CSS селектор по ID","type":"header-three","key":"b485c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#header {","type":"blockquote","key":"eqdv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: #f0f0f0;","type":"blockquote","key":"3vkv9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"fupaq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Применяется к элементу с уникальным ID. Обратите внимание: ID должен быть уникален на странице.","type":"unstyled","key":"cqdfo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":25,"style":"BOLD"}],"text":"И снова в коде: ","type":"unstyled","key":"b2k0j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Комбинированные селекторы","type":"header-three","key":"18vjf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div.menu p {","type":"blockquote","key":"3b5gi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: green;","type":"blockquote","key":"49l3m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"digfp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Покрасит зеленым текст абзаца

внутри блока

с классом menu. Полезны для более точного выбора.","type":"unstyled","key":"b6g51"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробнее в коде:","type":"unstyled","key":"7hrpr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"894nk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":9,"style":"BOLD"}],"text":" ","type":"blockquote","key":"e1rre"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":9,"style":"BOLD"}],"text":" ","type":"blockquote","key":"8q9p5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":22,"style":"BOLD"}],"text":"

Этот абзац вне .menu — тоже не изменится

","type":"blockquote","key":"a9bg6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"flj00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. CSS селектор по атрибуту","type":"header-three","key":"23bib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"input[type=\"text\"] {","type":"blockquote","key":"54r4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border: 1px solid #ccc;","type":"blockquote","key":"aso12"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"85qsu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":8,"style":"BOLD"},{"length":30,"offset":44,"style":"BOLD"},{"length":19,"offset":76,"style":"BOLD"},{"length":11,"offset":111,"style":"BOLD"}],"text":"Селектор input[type=\"text\"] применяет стиль только к текстовым полям ввода (). Он задаёт им серую рамку толщиной 1 пиксель. Поля других типов (например, password) не затронутся.","type":"unstyled","key":"hn0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот на этот код будет воздействовать селектор (только первый элемент, потому что второй имеет тип password)","type":"unstyled","key":"6ebcn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"18vv1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":5,"style":"BOLD"}],"text":" ","type":"blockquote","key":"8kbr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"4tn08"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"fsrl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Псевдоклассы и псевдоэлементы","type":"header-three","key":"f8uj2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"a:hover {","type":"blockquote","key":"7g689"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"text-decoration: underline;","type":"blockquote","key":"4v9hn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"a1frk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"p::first-letter {","type":"blockquote","key":"cbu4a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"font-size: 200%;","type":"blockquote","key":"b4r9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"fd8dk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Позволяют стилизовать элемент в определённом состоянии или отдельную его часть. hover - это когда мышкой наводим на элемент. Подумайте, что значит text-decoration: underline; и что же там подчеркивается при наведении?","type":"unstyled","key":"83bvb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6. Универсальный селектор CSS","type":"header-three","key":"dvkks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"* {","type":"blockquote","key":"8dr4n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"box-sizing: border-box;","type":"blockquote","key":"c9fca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"dih90"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выбирает все элементы на странице. Используется, например, для сброса стилей.","type":"unstyled","key":"14dd7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Специфичность и приоритет селекторов CSS","type":"header-two","key":"cb6p6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":70,"style":"BOLD"}],"text":"Когда несколько правил применяются к одному элементу, вступает в силу приоритет селекторов CSS. Порядок специфичности:","type":"unstyled","key":"c450m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Селектор по ID","type":"ordered-list-item","key":"eo34n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Селектор по классу, атрибуту, псевдоклассу","type":"ordered-list-item","key":"fc8dd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Селектор по тегу","type":"ordered-list-item","key":"empp1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Универсальный селектор","type":"ordered-list-item","key":"4jle6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Понимание специфичности важно, чтобы стили применялись так, как вы ожидаете. Как видим, по ID самый приоритетный. А универсальный наименее. Значит мы можем, например всю страницу покрасить в один цвет при помощи универсального селектора, а потом через ID или даже теги красить отдельные элементы.","type":"unstyled","key":"11rh5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS селекторы: следующий элемент и выбор","type":"header-two","key":"8ira9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":32,"style":"BOLD"}],"text":"Дополнительные возможности дают селекторы следующего элемента CSS. Это больше похоже на хак, но работает вполне штатно. Пример:","type":"unstyled","key":"a76n7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"h2 + p {","type":"blockquote","key":"1dpe5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"margin-top: 0;","type":"blockquote","key":"cneje"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"4seac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":5,"style":"BOLD"}],"text":"Этот CSS-селектор следующий выбирает только тот абзац, который непосредственно следует за заголовком

.","type":"unstyled","key":"3nc8d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему важно уметь выбирать селекторы","type":"header-two","key":"9sh7i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":33,"style":"BOLD"}],"text":"Понимание и умелое использование css селекторов даёт нам:","type":"unstyled","key":"6h74h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полнейший контроль над внешним видом сайта;","type":"unordered-list-item","key":"65dh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Гибкость в применении стилей;","type":"unordered-list-item","key":"bpe7j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чистый, понятный и поддерживаемый код, это важно для коммерческой разработки;","type":"unordered-list-item","key":"8eohn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возможность избежать конфликтов и переопределений. (Запомните приоритеты селекторов).","type":"unordered-list-item","key":"eh973"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":60,"style":"BOLD"}],"text":"Селекторы — это язык общения между HTML и стилями. Понимая, какая часть кода называется селектор CSS, и как он работает — вы делаете первый шаг к профессиональному веб-дизайну.","type":"unstyled","key":"a2pjd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-two","key":"btlpk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"},{"length":37,"offset":78,"style":"BOLD"}],"text":"CSS селекторы — это несложно, если подойти к изучению структурно. Используйте css классы, селекторы, идентификаторы, комбинируйте их, соблюдайте приоритет и создавайте аккуратные и логичные стили.","type":"unstyled","key":"ebrme"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":97,"style":"BOLD"},{"length":7,"offset":118,"style":"BOLD"},{"length":9,"offset":132,"style":"BOLD"}],"text":"А если вы только начинаете, просто поэкспериментируйте с примерами — и со временем выбор нужного css-селектора - хоть по тегу, хоть по классу станет интуитивным.","type":"unstyled","key":"d5arl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":27,"style":"BOLD"}],"text":"Если статья была полезна — поставьте пожалуйста ей лайк! Тогда статью увидит больше читателей, а мне будет приятнее готовить для вас ещё больше полезных материалов.","type":"blockquote","key":"4ac83"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":27,"style":"BOLD"}],"text":"Не нашли чего-то в статье? Пишите в комменты чего не хватает, и я добавлю!","type":"blockquote","key":"f32mj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"akq3l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8qe0l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"505vb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4efcg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1hmkp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"r7KWJMVofD4UV81J1tRf"}],"entityMap":{}},"mentions":[]}