Не помню как работает эти селекторы CSS

[Alexander3928]

Добрый день. Как работает этот селектор? .container .card .contentBx::before ? (между классами пробел)

<div class="container">
<div class="card">
    <div class="imgBx">
          <img src="img2.jpg">
    </div>
    <div class="contentBx">
          <div class="content">
                <h2>Post Two</h2>
                <p>TEXT TEXT TEXT</p>
          </div>
    </div>
</div>
</div>

[ksa]

Как работает этот селектор? .container .card .contentBx::before ?

У элементов .container есть некие потомки (любого уровня вложения) .card...
У тех потомков, в свою очередь, есть потомки (ЛУВ) .contentBx...
И вот нас интересуют их псевдо элементы ::before

<style> 
q::before {
  content: "«";
  color: blue;
}

q::after {
  content: "»";
  color: red;
}
</style> 
<q>Немного кавычек</q>, как он сказал, <q>лучше чем ничего.</q>

[рони]

Alexander3928,

внутри элемента с class="container" найти элемент с class="card"
внутри элемента с class="card" найти элемент с class="contentBx "
для элемента с class="contentBx " применить оформление с помощью псевдоэлемента ::before

[Alexander3928]

ksa,
рони,
Если я правильно понял это добавить стиль псевдоклассу before. Но зачем тогда указывать эту карусель? если можно просто указать .contentBx::before. Мне вот это не понятно.

[ksa]

Но зачем тогда указывать эту карусель? если можно просто указать .contentBx::before. Мне вот это не понятно.

Все зависит от самой разметки...

Возможно это не обоснованное усложнение селектора... А возможно декорировать нужно именно элемент в такой вложенности элементов...

Т.е. на этот вопрос может ответить только "видавший" всю разметку страницы/сайта... Или сам автор этого селектора.

[ksa]

Если взять такую ситуацию (см. пример ниже) смысл в ом селекторе уже будет.

<div class="container">
<div class="card">
    <div class="imgBx">
          <img src="img2.jpg">
    </div>
    <div class="contentBx">
          <div class="content">
                <h2>Post Two</h2>
                <p>TEXT TEXT TEXT</p>
          </div>
    </div>
</div>
</div>
<div class="contentBx">
      <div class="content">
            <h2>Новое сообщение</h2>
            <p>Это его контент...</p>
      </div>
</div>