it-swarm.com.ru

Что означает CSS-селектор «>» (больше знака)?

Например:

div > p.some_class {
  /* Some declarations */
}

Что именно означает знак >?

444
Misha Moroshko

> - это дочерний комбинатор , иногда ошибочно называемый комбинатором прямого потомка.1

Это означает, что селектор div > p.some_class выбирает только те абзацы .some_class, которые вложены непосредственно в div, а не любые абзацы, которые вложены дальше в.

Иллюстрация:

<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>

Что выбрано, а что нет:

  1. Selected
    Этот p.some_class находится непосредственно внутри div, следовательно, между обоими элементами установлены отношения родитель-потомок.

  2. Не выбрано
    Этот p.some_class содержится в blockquote внутри div, а не в div. Хотя этот p.some_class является потомком div, он не является дочерним; это внук.

    Следовательно, хотя div > p.some_class не будет соответствовать этому элементу, div p.some_class будет использовать вместо него комбайнатор потомков .


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

634
BoltClock

> (знак "больше") - это CSS-комбинатор.

Комбинатор - это то, что объясняет отношения между селекторами.

Селектор CSS может содержать более одного простого селектора. Между простыми селекторами мы можем включить комбинатор.

В CSS3 есть четыре различных комбинатора:

  1. селектор потомков (пробел)
  2. выбор ребенка (>)
  3. соседний селектор (+)
  4. общий выбор сестер (~)

Примечание: < недопустимо в селекторах CSS.

enter image description here

Например:

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

Выход:

enter image description here

Подробнее о CSS Combinators

30
Premraj

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

http://www.w3.org/TR/CSS2/selector.html#child-selectors

11
Dagg Nabbit

Он сопоставляет элементы p с классом some_class, которые непосредственно под div.

7
dan04

Все теги p с классом some_class, которые являются прямыми потомками тега div.

2
tschaible
<div>
    <p class="some_class">lohrem text (it will be of red color )</p>    
    <div>
        <p class="some_class">lohrem text (it will  NOT be of red color)</p> 
    </div>
    <p class="some_class">lohrem text (it will be  of red color )</p>
</div>
div > p.some_class{
    color:red;
}

Все прямые потомки, <p> с .some_class, получат к ним стиль.

1
suraj rawat

(дочерний селектор) был введен в css2. div p {} выбирает все элементы p, которые являются потомками элементов div, тогда как div> p выбирает только дочерние элементы p, а не grand child и т.д.

<style>
  div p{  color:red  }       /* match both p*/
  div > p{  color:blue  }    /* match only first p*/

</style>

<div>
   <p>para tag, child and decedent of p.</p>
   <ul>
       <li>
            <p>para inside list. </p>
       </li>
   </ul>
</div>

Для получения дополнительной информации о CSS Ce [лекторах и их использовании, проверьте мой блог, селекторы css и селекторы css

0
Avinash Malhotra