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

476

Например:

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

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

css css-selectors

— Миша Морошко
источник

673

>является детским комбинатором , иногда ошибочно называемым прямым потомком комбинатора. ¹

Это означает, что селектор div > p.some_classвыбирает только те абзацы .some_class, которые вложены непосредственно в a 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>

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

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

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

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

— BoltClock
источник

2

+1 Это действительно называется детским селектором ? Если так, то это довольно обманчиво. Я бы подумал, #something aбыл бы детским селектором.

— Алекс

2

@alex: да :) #something aможет означать, aчто это внук или великий внук #something(без учета глубины вложения).

— BoltClock

12

@alex это называется дочерним комбинатором , пространство называется потомственным комбинатором

— robertc

33

Когда кто-то является ребенком их дедушки и бабушки, мы имеем дело с действительно неприятным случаем инцеста. К счастью, это невозможно в HTML.

— Квентин

8

Я не слышу, чтобы миряне называли своих детей своими прямыми детьми для ясности.

— BoltClock

41

> (знак «больше чем») - это CSS Combinator.

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

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

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

селектор потомков (пробел)
дочерний селектор (>)
соседний селектор (+)
общий выбор братьев и сестер (~)

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

Например:

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

Вывод:

Больше информации о CSS Combinators

— Premraj
источник

developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/…

— Лалит Ядав

@premraj Спасибо за отличное объяснение селекторов css родитель-ребенок!

— YCode

Что это значит тогда, когда вы получаете что-то вроде .entry-content > * {"code" }чего следует .entry-content {"other code" }? Не .entry-content > *распространяется на всех детей entry-content?

— YCode

14

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

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

— Дагг Наббит
источник

Большое спасибо за ссылку! Я обнаружил также «Соседние селекторы».

— Миша Морошко

Вы найдете поддержку браузера на Sitepoint. Не работает в IE6, если это имеет значение для ваших проектов, хорошо везде. Этот ресурс ESP. полезно для братьев и сестер: nth-child () и т. д., где поддержка еще не завершена

— FelipeAls

10

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

— dan04
источник

5

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

— tschaible
источник

4

HTML

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

CSS

div > p.some_class{
    color:red;
}

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

— Сурадж Рават
источник

3

(дочерний селектор) был введен в css2. div p {} выбирает все элементы p, потомки элементов div, тогда как div> p выбирает только дочерние элементы p, но не grand child, потом grand 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 селекторы и css3 селекторы

— Авинаш Малхотра
источник

0

Селектор с большим знаком (>) в CSS означает, что селектор справа является прямым потомком / потомком того, что находится слева.

Пример:

article > p { }

Означает только стиль абзаца, который идет после статьи.

— authentichigh
источник