O que significa o seletor CSS “+” (sinal de mais)?

750

Por exemplo:

p + p {
  /* Some declarations */
}

Eu não sei o que isso +significa. Qual é a diferença entre isso e apenas definir um estilo para psem + p?

gday
fonte
Na prática, isso é muito útil para aplicar uma margem ou preenchimento entre elementos da lista do mesmo tipo, portanto, nenhum caso especial é necessário para o primeiro ou o último elemento.
Christophe Roussy

Respostas:

749

Veja seletores adjacentes em W3.org.

Nesse caso, o seletor significa que o estilo se aplica apenas a parágrafos diretamente após outro parágrafo.

Um pseletor simples aplicaria o estilo a todos os parágrafos da página.


Isso funcionará apenas no IE7 ou superior. No IE6, o estilo não será aplicado a nenhum elemento. Isso também vale para o >combinador, a propósito.

Consulte também a visão geral da Microsoft para compatibilidade com CSS no Internet Explorer .

Thorarin
fonte
Achei útil não recolher o elemento quando oculto. Portanto, uma maneira mais apropriada de ocultá-lo é usando em visibility : hidden/visiblevez de display : none/block. Veja esta referência .
KFL 24/08/14
6
qual será a diferença entre p + p e p> p
Muhammad Rizwan
7
@MuhammadRizwan p > psignifica um aninhado p, ei qualquer pque esteja diretamente abaixo de outro p, como <p><p>This paragraph</p></p>.
Banana
203

É o seletor de irmão adjacente.

Do blog Splash of Style.

Para definir um seletor adjacente de CSS, o sinal de adição é usado.

h1+p {color:blue;}

O código CSS acima formatará o primeiro parágrafo depois (não dentro) de qualquer cabeçalho h1 como azul.

h1>pseleciona qualquer pelemento que seja um filho direto (primeira geração) (interno) de um h1elemento.

  • h1>pfósforos <h1> <p></p> </h1>( <p>dentro <h1>)

h1+pselecionará o primeiro pelemento que é um irmão (no mesmo nível do dom) que um h1elemento.

  • h1+pcorrespondências <h1></h1> <p><p/>( <p>próximo / depois <h1>)
Matthew Vines
fonte
3
Estou confuso entre plus signe greater sign. Se eu usar em h1>pvez de h1+p, isso me dá o mesmo resultado? Você poderia explicar um pouco a diferença entre eles?
Lvarayut
91
Nos seus exemplos, h1>pselecione qualquer pelemento que seja um filho direto (primeira geração) de um h1elemento. h1+pselecionará o primeiro pelemento que é um irmão (no mesmo nível do dom) que um h1elemento. h1>pjogos <h1><p><p></h1>, h1+pjogos<h1></h1><p><p/>
Matthew Vines
1
@MatthewVines u deve adicionar que h1> p e h1 + p a sua resposta
MonsterMMORPG
Portanto, essencialmente no seu exemplo, ele corresponderá ao primeiro <p> após <h1>, mas também corresponderia ao mesmo <p> se vier antes de <h1>? Ou é só depois?
Vincent
53

O +sinal significa selecionar um "irmão adjacente"

Por exemplo, este estilo será aplicado a partir do segundo <p>:

p + p {
   font-weight: bold;
} 
<div>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
</div>


Exemplo

Veja este JSFiddle e você o entenderá: http://jsfiddle.net/7c05m7tv/ (Outro JSFiddle: http://jsfiddle.net/7c05m7tv/70/ )


Suporte do navegador

Os seletores de irmãos adjacentes são suportados em todos os navegadores modernos.


Saber mais

Cas Bloem
fonte
42

"+" é o seletor de irmão adjacente. Ele seleciona qualquer p DIRETAMENTE APÓS ap (embora não seja um filho ou pai ou mãe, um irmão).

Gordon Gustafson
fonte
23

+seletor é chamado Adjacent Sibling Selector.

Por exemplo, o seletor p + p, seleciona os pelementos imediatamente após os pelementos

Pode ser pensado como um looking outsideseletor que verifica o elemento imediatamente seguinte.

Aqui está um exemplo de trecho para deixar as coisas mais claras:

body {
  font-family: Tahoma;
  font-size: 12px;
}
p + p {
  margin-left: 10px;
}
<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

Como somos o mesmo tópico, vale a pena mencionar outro seletor, ~seletor, que éGeneral Sibling Selector

Por exemplo, p ~ pseleciona tudo o pque segue p, não importa onde esteja, mas ambos pdevem ter o mesmo pai.

Aqui está como ele se parece com a mesma marcação:

body {
  font-family: Tahoma;
  font-size: 12px;
}
p ~ p {
  margin-left: 10px;
}
<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

Observe que o último ptambém é correspondido nesta amostra.

Lijo Joseph
fonte
8

+apresenta um dos seletores relativos. Lista de todos os seletores relativos:

div p- Todos os <p>elementos dentro dos <div>elementos são selecionados.

div > p- Todos os <p>elementos cujo pai direto é <div>selecionado. Também funciona para trás ( p < div)

div + p- Todos os <p>elementos são colocados imediatamente após o <div>elemento ser selecionado.

div ~ p- Todos os <p>elementos precedidos por um <div>elemento são selecionados.

Mais sobre os seletores, verifique aqui .

Nesha Zoric
fonte
O último seletor está errado. De acordo com MDN : O elemento de combinação irmão geral (~) separa dois selectores e coincide com o segundo elemento de apenas se segue-se o primeiro elemento (embora não necessariamente imediatamente), e ambos são filhos do mesmo elemento pai
Carles Alcolea
2

Ele seleciona o próximo parágrafo e recua o início do parágrafo a partir da esquerda, como você faria no Microsoft Word.

flo
fonte
2
p+p{
//styling the code
}

p+p{
} simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body.

    <div>
    <input type="text" placeholder="something">
    <p>This is first paragraph</p>
    <button>Button </button>
    <p> This is second paragraph</p>
    <p>This is third paragraph</p>
    </div>

    Styling part 
    <style type="text/css">
        p+p{
            color: red;
            font-weight: bolder;
        }
    </style>

   It will style all sibling paragraph with red color.

saída final parecido com este

insira a descrição da imagem aqui

IMRA
fonte
1

O sinal de mais (+) seleciona o primeiro elemento imediato. Ao usar o seletor +, você deve fornecer dois parâmetros. Isso ficará mais claro por exemplo: aqui div e span são parâmetros, portanto, neste caso, somente o primeiro span após a div será denominado.

 div+ span{
   color: green;
   padding :100px;
}

     <div>The top or first element  </div>
       <span >this is span immediately after div, this will be selected</span>
       <span>This will not be selected</span>

O estilo acima será aplicado somente ao primeiro período após div. É importante observar que o segundo intervalo não será selecionado.


fonte