Qual é a diferença entre '>' e um espaço nos seletores CSS?

127

Qual é o sentido de usar essa sintaxe

div.card > div.name

Qual é a diferença entre isso

div.card div.name
css css-selectors Randy Mayer
fonte
Além dessa pergunta, como eu não sabia disso e poderia ser usado para resolver um problema que estou tendo, quais navegadores suportam esse tipo de seletor?
Kyle
3
É suportado em todos os navegadores atuais. IE tem suporte na versão 7: msdn.microsoft.com/en-us/library/...
Matti Virkkunen

Respostas:

212

A > B selecionará apenas B filhos diretos para A (ou seja, não há outros elementos entre eles).

A B selecionará qualquer B que esteja dentro de A, mesmo se houver outros elementos entre eles.

Matti Virkkunen
fonte
11

>é o seletor filho. Ele especifica apenas os elementos filhos imediatos e não qualquer descendente (incluindo netos, netos etc.), como no segundo exemplo sem o >.

O seletor filho não é suportado pelo IE 6 e inferior. Uma excelente tabela de compatibilidade está aqui .

Pekka
fonte
2

div.card > div.namecorresponde, <div class='card'>....<div class='name'>xxx</div>...</div> mas não corresponde<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name combina ambos.

Ou seja, o >seletor garante que o elemento selecionado no lado direito do >é um filho imidiado do elemento no lado esquerdo.

A sintaxe sem a >correspondência com qualquer <div class='name'>descendente (não apenas filho) de <div class='card'>.

René Nyffenegger
fonte
0

A> B seleciona B se for um filho direto de A, enquanto AB seleciona B se é um filho direto de B ou não.

<p> USING SPACE </p>

<style>
  .a .b {
    background-color: red;
  }
</style>

<span class="a">
  a
  <br>
  <span class="b"> a b</span>
  <br>

  <span class="c">
    <span class="b"> a b c</span>
  </span>
</span>

<br><br>
<p> USING GREATER THAN SIGN</p>

<style>
  .x > .y {
    background-color: red;
  }
</style>

<span class="x">
  x
  <br>
  <span class="y"> x y</span>
  <br>

  <span class="z">
    <span class="y"> x y z</span>
  </span>
</span>
Expandir snippet

eozten
fonte
Há um trecho de código aqui. Eu não sei se você pode ver.
eozten
A demonstração é boa, mas realmente apenas auxiliar para as informações que respondem à pergunta; informações que já estão nas outras três respostas. Talvez se essa pergunta fosse feita hoje, isso seria útil, mas se você precisar de uma pergunta com mais de 8 anos de idade, deve ser realmente por um motivo convincente.
TylerH 24/09/19
0

> vs Espaço

Considere os dois cenários div > span { }vs.div span { }

Aqui, o <space>seleciona todos os <span>elementos do <div>elemento, mesmo que estejam dentro de outro elemento. O> seleciona todos os filhos do <div>elemento, mas se eles estiverem dentro de outro elemento.

> (Maior que):

div > span {
  color: #FFBA00 ;
}
<body>
  <div>

    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
</body>
Expandir snippet

Este apenas seleciona o <span>World!</span>e não procura o <span>interior<p> etiqueta .

Espaço

div span {
  color: #FFBA00 ;
}
<body>
  <div>
    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
<body>
Expandir snippet

Este seleciona todas as tags de extensão, mesmo se estiverem aninhadas dentro de outra tag.

S.Goswami
fonte