">" В CSS - Что это и для чего это?

Question

Вот есть условный код и я не очень понимаю, что делает и для чего нужен знак сравнения(или как он еще называется). Подскажите для чего он используется или если у "этого" есть название, дайте сурс или доки, где можно прочитать именно про это, пожалуйста.

.neon > img{
    
}

Answer 1

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

Например, у вас есть <ul class="green">-список с вложенным <ul>-списком, цвет фона текста которого зелёный:

.green li span {
  background-color: lightgreen;
}

<ul class="green">
  <li><span>1.</span></li>
  <li><span>2.</span></li>
  <li><span>3.</span>
    <ul>
      <li><span>3.1.</span></li>
      <li><span>3.2.</span></li>
      <li><span>3.3.</span></li>
    </ul>
  </li>
  <li><span>4.</span></li>
</ul>

Вы хотите сделать так, чтобы только первый уровень <li> имел зелёный фон, для этого используйте комбинатор дочерних элементов (>):

.green > li > span {
  background-color: lightgreen;
}

<ul class="green">
  <li><span>1.</span></li>
  <li><span>2.</span></li>
  <li><span>3.</span>
    <ul>
      <li><span>3.1.</span></li>
      <li><span>3.2.</span></li>
      <li><span>3.3.</span></li>
    </ul>
  </li>
  <li><span>4.</span></li>
</ul>

Если перевести селектор .green > li > span в "человеческий", то CSS видит это следующим образом: взять класс green, взять только дочерний li первого уровня вложенности, взять только дочерний span первого уровня вложенности.

К слову, .green li span - это тоже комбинатор, называется комбинатор потомков.

БЛОГ НА HUSL

">" В CSS - Что это и для чего это?

Ответы (1 шт):