Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Не помню как работает эти селекторы CSS (https://javascript.ru/forum/misc/83475-ne-pomnyu-kak-rabotaet-ehti-selektory-css.html)

Alexander3928 18.12.2021 20:13

Не помню как работает эти селекторы CSS
 
Добрый день. Как работает этот селектор? .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 18.12.2021 21:06

Цитата:

Сообщение от Alexander3928
Как работает этот селектор? .container .card .contentBx::before ?

У элементов .container есть некие потомки (любого уровня вложения) .card...
У тех потомков, в свою очередь, есть потомки (ЛУВ) .contentBx...
И вот нас интересуют их псевдо элементы ::before
<style> 
q::before {
  content: "«";
  color: blue;
}

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

рони 18.12.2021 21:07

Alexander3928,

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

Alexander3928 18.12.2021 21:31

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

ksa 18.12.2021 22:23

Цитата:

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

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

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

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

ksa 18.12.2021 22:26

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

<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>


Часовой пояс GMT +3, время: 13:22.