Що означає селектор CSS ">" (більший, ніж знак)?

475

Наприклад:

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

Що саме означає >знак?

css css-selectors

— Міша Морошко
джерело

672

>є дочірнім комбінатором , який іноді помилково називають комбінатором прямого нащадка. ¹

Це означає, що селектор 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, це не дитина; це онук.

Отже, хоча div > p.some_classцей елемент не буде відповідати, div p.some_classбуде, використовуючи нащадок комбінатор .

¹ _{Багато людей йдуть далі, називаючи це "прямою дитиною" або "безпосередньою дитиною", але це зовсім непотрібно (і неймовірно дратує мене), оскільки дочірній елемент так чи інакший за визначенням , так що вони означають абсолютно те саме. Немає такого поняття, як "непряма дитина".}

— BoltClock
джерело

2

+1 Чи справді його називають дочірнім селектором ? Якщо так, то це досить оману. Я б подумав, #something aщо це вибір дитини.

— alex

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

— Премрай
джерело

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. корисно для братів і сестер

— ,:

10

Він відповідає pелементам класу, some_classякі знаходяться безпосередньо під а div.

— dan04
джерело

5

Усі pтеги з класом, some_classякі є прямими дітьми divтегу.

— tchachable
джерело

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отримаєте стиль , застосований до них.

— suraj rawat
джерело

3

(дочірній селектор) введено в css2. div p {} вибирає всі p елементи, відхилені від елементів div, тоді як div> p вибирає лише дочірні p елементи, а не діточку, велику дитину тощо.

<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 [lectors та їх використання, перегляньте мій блог, css селектори та css3 селектори

— Авінаш Малхотра
джерело

0

Більш великий селектор знаку (>) у CSS означає, що селектор праворуч є прямим нащадком / дочкою того, що знаходиться ліворуч.

Приклад:

article > p { }

Стиль означає лише абзац, який з’являється після статті.

— автентично
джерело