Контекстный и дочерний селекторы — в чём разница? И что за [class*="..."]?

Question

[Эмиль Валеев]

Доброго всем времени суток.
Столкнулся с пробелами в знаниях, хотелось бы их залатать:
В чём разница между контекстным:
div a { ... }
и дочерним селектором:
div > p { … }
Вижу разницу только в синтаксисе, на практике же всегда пользовался контекстным (пробел) и не парился.
Вопрос №2 - пользуюсь также универсальными правилами типа
[class*="column"] { ... }
Вместо того, чтобы писать colimn1, column2, ..., columnN { ... }
А вот что это вообще такое, не знаю :(
Хотелось бы побольше теоретической базы с этим приемчиком.
Заранее всем спасибо :)

Answer 1

[Codebaker]

Мой простой пример поможет вам разобраться

Answer 2

[Аркадий Бутерманов]

1. В контекстном селекторе (div a) правило применится сразу для всех тегов a, находящихся внутри div. Таким образом, имея следующую структуру:

<div>
  <a>Ссылка 1</a>

  <ul>
    <li><a>Ссылка 2</a></li>
    <li><a>Ссылка 3</a></li>
  </ul>
</div>

и следующий селектор:
div a {...}

вы примените ваше правило ко ВСЕМ ссылкам внутри div (Ссылка 1, Ссылка 2, Ссылка 3). И не важно, на каком уровне вложенности они находятся.

Если же вы напишете:
div > a {...}

то ваши стили применятся ко всем ссылкам, которые лежат НЕПОСРЕДСТВЕННО в блоке div. В нашем случае это только Ссылка 1.

Подробнее читайте здесь:
Контекстные селекторы
Дочерние селекторы

2. Это называется регулярные выражения. Это очень мощный механизм для поиска и проверки вхождения строки в другую строку. Применительно к CSS читайте здесь: www.nulled.cc/threads/243048

Comments

[Константин Китманов]

Регулярные выражения — действительно мощный механизм поиска и проверки вхождения подстроки в строку, но к селекторам это не имеет никакого отношения. Иначе бы работало такое, например: [class=/column\d{1,2}/]

Answer 3

[CrackedSapphire]

1. Контекстный выберет все элементы, дочерний только прямых потомков.

Answer 4

[Василий]

по поводу №2 - не проще повторяющиеся описания вынести в отдельный класс и не париться?

Answer 5

[Михей Егоров]

1. div > p позволяет выбрать только дочерние параграфы. Больше инфы про селекторы тут.

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

<div class="column-12"><div class="column-extra-6">

.
Не нужно усложнять, используйте .classname, насколько это возможно.
Немного инфы: css-tricks.com/multiple-attribute-values
https://developer.mozilla.org/en-US/docs/Web/CSS/A...