В css что значит

CSS-селекторы

Селектор определяет, к какому элементу применять то или иное CSS-правило.

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

Базовые селекторы

Выбирает все элементы. По желанию, он может быть ограничен определённым пространством имён или относиться ко всему пространству имён.

Синтаксис: * ns|* *|*

Пример: * будет соответствовать всем элементам на странице.

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

Синтаксис: элемент

Пример: селектор input выберет все элементы .

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

Синтаксис: .имяКласса

Пример: селектор .index выберет все элементы с соответствующим классом (который был определён в атрибуте class=»index» ).

Этот базовый селектор выбирает элементы, основываясь на значении их id атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе.

Синтаксис: #имяИдентификатора

Пример: селектор #toc выберет элемент с идентификатором toc (который был определён в атрибуте id=»toc» ).

Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением.

Синтаксис: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

Пример: селектор [autoplay] выберет все элементы, у которых есть атрибут autoplay (независимо от его значения).

Ещё пример: a[href$=».jpg»] выберет все ссылки, у которых адрес заканчивается на «.jpg».

Ещё пример: a[href^=»https»] выберет все ссылки, у которых адрес начинается на «https».

Комбинаторы

Комбинатор , это способ группировки, он выбирает все совпадающие узлы.

Синтаксис: A, B

Пример: div, span выберет оба элемента — и и .

Комбинатор ‘ ‘ (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).

Синтаксис: A B

Пример: селектор div span выберет все элементы , которые находятся внутри элемента .

Комбинатор ‘>’ в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.

Синтаксис: A > B

Комбинатор ‘~’ выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.

Синтаксис: A ~ B

Комбинатор ‘+’ выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.

Синтаксис: A + B

Пример: селектор h2 + p выберет первый элемент , который находится непосредственно после элемента (en-US).

Псевдо

Знак : позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.

Пример: a:visited соответствует всем элементам которые имеют статус «посещённые».

Ещё пример: div:hover соответствует элементу, над которым проходит указатель мыши.

Ещё пример: input:focus соответствует полю ввода, которое получило фокус.

Знак :: позволяет выбрать вещи, которых нет в HTML.

Пример: p::first-line соответствует первой линии абзаца .

Версии CSS

Specification
Selectors Level 4

Зачем нужен знак «>» в CSS?

Фишка в том, что > указывает на те элементы, которые находятся именно в этом классе.

Думаю, по примерам будет довольно просто понять:

.menu > li < background: blue; // Красим элементы ТОЛЬКО в классе .menu, li .submenu не трогаем >.submenu > li < background: red; // Красим элементы ТОЛЬКО в классе .submenu, li .menu не трогаем >.menu li < background: pink; // Красим ВСЕ li, которые в .menu и в .submenu >

Отслеживать
ответ дан 15 фев 2019 в 14:25
7,404 2 2 золотых знака 11 11 серебряных знаков 25 25 бронзовых знаков

css
css3

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Каскадность в CSS — Основы современной верстки

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

Что такое каскадность? Представьте себе каскад водопадов. В них вода перетекает из одного водопада в другой и так до тех пор, пока это все не уйдет в общий бассейн.

В CSS слово каскадность имеет такое же значение. В качестве воды у нас CSS свойства. Они могут накладываться и перекрывать друг друга. Другими словами каскадность — возможность языка CSS накладывать свойства друг на друга, а также расширять свойства в селекторах.

Возможно такое описание достаточно сложное, но давайте посмотрим на примере. Создадим параграф с двумя классами: text-bold и text-dark . Первый класс будет отвечать за жирное начертание текста, а второй за установку темного цвета шрифта. Также добавим селектор по тегу и укажем размер шрифта 24 пикселя.

 class="text-bold text-dark"> Какой-то очень интересный текст об интересной вещи. Очень интересно.

В CSS файле укажем следующие стили:

p  font-size: 24px; > .text-bold  font-weight: bold; > .text-dark  color: #333333; >

Попробуйте воспроизвести этот пример, и вы увидите, что текст выводится темного цвета и с жирным начертанием. Стили от классов text-bold и text-dark сложились и применились к нашему параграфу. Также текст имеет размер 24 пикселя, которые мы указали для селектора по тегу.

Итоговыми стилями для нашего параграфа будут:

 color: #333333; font-weight: bold; font-size: 24px; >

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

Приоритет селекторов

Важной чертой CSS является то, что разные типы селекторов имеют разный приоритет. Если стили противоречат друг другу в разных селекторах, то вступает в дело принцип приоритета. Разберем на примере. Возьмем параграф с классом red и идентификатором blue . Установим соответствующие цвета для текста. Для всех же параграфов в тексте установим зеленый цвет.

p  color: green; > .red  color: red; > #blue  color: blue; >

 id="blue" class="red">Какого же цвета будет параграф?

Перед тем, как читать дальше попробуйте выполнить этот пример в любом удобном вам месте.

Как вы смогли заметить, текст параграфа будет синим. Но почему так? Может быть, дело в том, что синий цвет в CSS указан самым последним? В данном случае нет. Даже если мы переместим селектор по идентификатору в самый вверх, параграф все равно останется синим.

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

Условно можно расставить селекторы в следующем порядке по приоритету:

Селектор по идентификатору ( #blue )
Селектор по классу ( .red )
Селектор по тегу ( p )

Где 1 — самый высокий приоритет, а 3 — самый низкий.

Разберем еще один пример:

p  color: blue; font-weight: bold; > .important  color: purple; font-style: italic; > #intro  color: green; >

 class="important" id="intro">Индейские племена Манахаттоу и Канарси.

Этот текст будет наклонным, жирным и зеленым . И вот почему:

Селектор по тегу p :
- Добавит синий цвет
- Добавит жирное начертание
- Заменит ~~синий цвет~~ на пурпурный
- Сделает текст курсивным
- Заменит ~~пурпурный цвет~~ на зеленый
После всех таких преобразований итоговые стили для параграфа сложатся следующим образом:
```
 color: green; font-weight: bold; font-style: italic; > 
```
Важно: так как селектор по идентификатору имеет самый высокий приоритет и перебивает все стили классов, то его использование считается не очень хорошей практикой. Указав стили для идентификатора, мы лишаем себя возможности переопределить стили с помощью классов. Это бывает очень важно для создания отзывчивых к действиям пользователя сайтов, когда на его действия мы меняем внешний вид некоторых элементов.

Переопределение свойств

Возможно, у вас возник вопрос, а что случится, если элемент будет иметь несколько классов, свойства которых противоречат друг другу? Здесь каскадность работает по принципу «Кто последний, тот и прав». Проще всего это так же посмотреть на примере:
```
.alert  color: gray; > .alert-error  color: red; > 
```
```
 class="alert alert-error">Важное сообщение! Сообщение красного цвета 
```
Отталкиваясь от принципа каскадности, браузер вначале увидит селектор .alert и установит серый цвет текста. Далее ему встретится селектор .alert-error , который говорит установить красный цвет. И браузер просто перезапишет серый цвет на красный. Порядок классов в HTML в данном случае не играет никакой роли. Даже в таком случае
```
 class="alert-error alert">Важное сообщение! Сообщение красного цвета 
```
цвет текста будет красным. Это наглядно показывает независимость CSS от HTML. Если же поменять местами селекторы в CSS, то поменяются и итоговые стили.
```
.alert-error  color: red; > .alert  color: gray; > 
```
```
 class="alert alert-error">Важное сообщение! Сообщение серого цвета 
```
Вес селекторов

Во время разработки вы будете встречать разные ситуации, при которых одни селекторы будут иметь больший вес, чем другие. Причем их месторасположение в CSS файле не имеет особого значения:
```
 class="form-input"> 
```
```
.form-input  height: 50px; > textarea  height: 200px; > 
```
Какой высоты будет элемент ? Правильный ответ — 50px, так как селектор по классу имеет больший приоритет, чем селектор по тегу. Но как же задать высоту в 200px и не вводить новые классы? Достаточно подставить к тегу еще и название класса:
```
.form-input  height: 50px; > textarea.form-input  height: 200px; > 
```
Теперь для элемента будет установлена высота в 200px. Это произошло благодаря тому, что приоритеты «складываются» в рамках одного селектора. Для большего понимания таких сложений можно представить, что общий вес селектора определяется тремя цифрами, где:
1. Первая цифра показывает количество идентификаторов в селекторе
2. Вторая цифра показывает количество классов в селекторе
3. Третья цифра показывает количество тегов в селекторе
Может звучать сложно, но концепция простая. Разберем прошлый пример:
```
 class="form-input"> 
```
```
.form-input  height: 50px; > textarea  height: 200px; > 
```
- Селектор .form-input состоит из одного класса, поэтому в качестве второй цифры поставим единицу и получим: 010
- Селектор textarea состоит из одного тега. Записываем единицу в третий разряд нашего числа: 001
Визуально понятно, что 010 > 001, поэтому свойства внутри такого правила имеют больший приоритет. Мы захотели это исправить и дополнили наш селектор:
```
.form-input  height: 50px; > textarea.form-input  height: 200px; > 
```
Теперь порядок сил во вселенной немного изменился:
- Селектор .form-input состоит из одного класса, поэтому в качестве второй цифры поставим единицу и получим: 010
- Селектор textarea.form-input состоит из одного класса и тега. Записываем единицу во второй и третий разряд нашего числа: 011
Получаем, что 010 < 011, а значит свойства внутри селектора textarea.form-input будут иметь больший приоритет.

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

Самостоятельная работа

Создайте файл index.html на своем компьютере.

Внутри HTML расположите следующую запись:
```
  lang="en">  charset="UTF-8"> Небольшая вёрстка div  width: 500px; height: 500px; background: #333333; > #main  color: white; width: 750px; > .text-white  color: white; > .alert  height: 350px; color: gray; > div  background: blue; > .alert-warning  background: #000000; color: yellow; >    id="main" class="text-white alert alert-warning">Какой-то текст   
```
Проанализируйте получившийся результат

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар « Как самостоятельно учиться »
Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:

CSS-селекторы: Способы задавать CSS-стили для HTML-элементов

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

Это один из уроков курса HTML/CSS Advanced и если вы хотите научиться верстать веб-сайты на профессиональном уровене, я рекомендую проходить этот курс на сайте FructCode с интерактивными упражнениями для закрепления ваших знаний полученных из курса верстки сайтов.

Только на сайте FructCode вы можете найти актуальных версии моих курсов!

Содержание
- Что такое CSS-селекторы (CSS Selectors)
- Универсальный CSS-селектор * (звездочка)
- CSS-селекторы по классу (Class selectors)
- Запись CSS-стилей через точку «.» и без пробелов
- Запись CSS-стилей через запятую «,»
- Запись CSS-стилей через пробел (space)
- Запись CSS-стилей через знак больше «>»
- Запись CSS-стилей через знак “~»
- Запись CSS-стилей через знак плюс «+»
- Запись CSS-стилей для HTML-элемента по атрибуту
- Вывод
Что такое CSS-селекторы (CSS Selectors)

CSS-селекторы — это специальные выражения описанные с помощью CSS (каскадные таблицы стилей), которые задают правила, как браузеру применять CSS-стили для HTML-элементов, которые определяются внутри блока CSS-стилей.

На первый взгляд вам может показаться, что определение CSS-селекторов сложное и непонятное. Но не волнуйтесь, на самом деле на практике все намного проще, чем кажется. И давайте сейчас на простых примерах рассмотрим что такое CSS-селекторы.

Видео Что такое CSS-селекторы: Способы задавать стили для HTML-элементов

Кстати, не забудь подписаться на наш YouTube канал FructCode, где вы можете найти много полезных обучающих видео о верстке сайтов.

Универсальный CSS-селектор * (звездочка)

С помощью универсального CSS-селектора * (звездочка) вы можете задавать правила какие CSS-стили применять сразу ко всем HTML тегам.

Пример кода, как задать с помощью универсального CSS-селектора * (звездочка) стили для всех HTML-элементов.

В итоге, ко всем HTML-тегам на странице, включая h1, span, div и другим применятся CSS-стили: размер шрифта 30px, цвет текста красный.

Универсальный CSS-селектор используется достаточно частно при создании верстки сайтов и вот почему. Дело в том, что пользователи используют различные браузеры: Google Chrome, Mozilla Firefox, Safari, Opera, Edge, различные мобильные браузеры и даже Internet Explorer старых версий. И каждый из браузеров может задавать свои CSS-стили для HTML-элементов по умолчанию. И та же HTML-форма будет выглядеть в разных браузерах по-разному.

И для того, чтобы ваш веб-сайт соответствовал макету дизайна сайта, обычно используют сброс стандартных стилей (reset css), которые задают браузеры. Reset CSS представляет набор CSS-стилей, который подключается к HTML-странице, в котором прописаны правила отображения для всевозможных HTML-элементов.

При применении Reset CSS или Normalize CSS, HTML-элементы выглядит примерно одинаково в большинстве браузеров.

CSS-селекторы по классу (Class selectors)

С помощью данного css-селектора вы можете задавать стили для HTML элементов у которых установлен тот или иной class.

Простой пример CSS-селектора по классу:

Запись CSS-стилей через точку «.» и без пробелов

Когда вы задаете CSS-стили через точку «.» и без пробелов (как в примере ниже) — это обозначает, что CSS-стили применятся ко всем тегам , у кого установлен класс .color. При этом, даже если у других html-элементов установлен class с именем .color, но этот html-элемент не является , стили к данному элементу не применятся и элемент с классом color не будет выделятся красным цветом.

А запись в виде div.color.text-color, когда без пробелов описывается несколько классов, обозначает, что стили применятся только к который имеет сразу два класса .color и .color-text и не применятся стили к к которому присвоен только один class с именем .color.

Запись CSS-стилей через запятую «,»

Запись CSS-стилей через пробел (space)

А так, с помощью CSS-селекторов (комбинатор потомков или descendant combinator), когда вы указываете в CSS-стилях элементы через пробел, вы можете применить стили к html-элементам, которые находятся внутри этих html-элементов вне зависимости от вложенности.

В css что значит

CSS-селекторы

Базовые селекторы

Комбинаторы

Псевдо

Версии CSS

Зачем нужен знак «>» в CSS?

Похожие

Подписаться на ленту

Каскадность в CSS — Основы современной верстки

Приоритет селекторов

Переопределение свойств

Вес селекторов

Самостоятельная работа

Остались вопросы? Задайте их в разделе «Обсуждение»

Открыть доступ

CSS-селекторы: Способы задавать CSS-стили для HTML-элементов

Что такое CSS-селекторы (CSS Selectors)

Видео Что такое CSS-селекторы: Способы задавать стили для HTML-элементов

Универсальный CSS-селектор * (звездочка)

CSS-селекторы по классу (Class selectors)

Запись CSS-стилей через точку «.» и без пробелов

Запись CSS-стилей через запятую «,»

Запись CSS-стилей через пробел (space)

Запись CSS-стилей через знак больше «>»

Запись CSS-стилей через знак “~»

Запись CSS-стилей через знак плюс «+»

Запись CSS-стилей для HTML-элемента по атрибуту

Вывод

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