Que signifie le sélecteur CSS «+» (signe plus)?


750

Par exemple:

p + p {
  /* Some declarations */
}

Je ne sais pas ce que cela +signifie. Quelle est la différence entre cela et juste définir un style pour psans + p?


En pratique, cela est surtout utile pour appliquer une marge ou un remplissage entre les éléments de liste du même type, donc aucun cas particulier n'est requis pour le premier ou le dernier élément.
Christophe Roussy

Réponses:


750

Voir les sélecteurs adjacents sur W3.org.

Dans ce cas, le sélecteur signifie que le style s'applique uniquement aux paragraphes qui suivent directement un autre paragraphe.

Un simple psélecteur appliquerait le style à chaque paragraphe de la page.


Cela ne fonctionnera que sur IE7 ou supérieur. Dans IE6, le style ne sera appliqué à aucun élément. Cela vaut également pour le >combinateur, soit dit en passant.

Voir également la présentation de Microsoft pour la compatibilité CSS dans Internet Explorer .


J'ai trouvé utile de ne pas réduire l'élément lorsqu'il était masqué. Par conséquent, un moyen plus approprié de le masquer consiste à utiliser à la visibility : hidden/visibleplace de display : none/block. Voir cette référence .
KFL

6
quelle sera la différence entre p + p et p> p
Muhammad Rizwan

7
@MuhammadRizwan p > psignifie un imbriqué p, ei tout ce pqui est directement en dessous d'un autre p, comme <p><p>This paragraph</p></p>.
Banana

203

C'est le sélecteur de frère adjacent.

Du blog Splash of Style.

Pour définir un sélecteur CSS adjacent, le signe plus est utilisé.

h1+p {color:blue;}

Le code CSS ci-dessus formatera le premier paragraphe après (pas à l'intérieur) des en-têtes h1 en bleu.

h1>psélectionne tout pélément qui est un enfant direct (première génération) (à l'intérieur) d'un h1élément.

  • h1>pallumettes <h1> <p></p> </h1>(à l' <p>intérieur <h1>)

h1+psélectionnera le premier pélément qui est un frère (au même niveau du dom) qu'un h1élément.

  • h1+pmatchs <h1></h1> <p><p/><p>côté / après <h1>)

3
Je suis confus entre plus signet greater sign. Si j'utilise à la h1>pplace de h1+p, cela me donne-t-il le même résultat? Pourriez-vous expliquer un peu comment différent entre eux?
lvarayut

91
Dans vos exemples, h1>psélectionne tout pélément qui est un enfant direct (première génération) d'un h1élément. h1+psélectionnera le premier pélément qui est un frère (au même niveau du dom) qu'un h1élément. h1>pmatchs <h1><p><p></h1>, h1+pmatchs<h1></h1><p><p/>
Matthew Vines

1
@MatthewVines u devrait ajouter que h1> p et h1 + p à votre réponse
MonsterMMORPG

Donc, essentiellement dans votre exemple, il correspondra au premier <p> après <h1>, mais correspondra-t-il également à ce même <p> s'il est arrivé avant <h1>? Ou est-ce seulement après?
Vincent

53

Le +signe signifie sélectionner un "frère adjacent"

Par exemple, ce style s'appliquera à partir du second <p>:

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


Exemple

Voir ce JSFiddle et vous le comprendrez: http://jsfiddle.net/7c05m7tv/ (Un autre JSFiddle: http://jsfiddle.net/7c05m7tv/70/ )


Prise en charge du navigateur

Les sélecteurs frères adjacents sont pris en charge dans tous les navigateurs modernes.


Apprendre encore plus


42

"+" est le sélecteur frère adjacent. Il sélectionnera n'importe quel p DIRECTEMENT APRÈS ap (pas un enfant ou un parent cependant, un frère ou une sœur).


23

+le sélecteur est appelé Adjacent Sibling Selector.

Par exemple, le sélecteur p + psélectionne les péléments suivant immédiatement les péléments

Il peut être considéré comme un looking outsidesélecteur qui vérifie l'élément immédiatement suivant.

Voici un exemple d'extrait pour clarifier les choses:

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>

Puisque nous sommes sur le même sujet, il convient de mentionner un autre sélecteur, ~sélecteur, qui estGeneral Sibling Selector

Par exemple, p ~ psélectionne tout ce pqui suit ppeu importe où il se trouve, mais les deux pdoivent avoir le même parent.

Voici à quoi cela ressemble avec le même balisage:

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>

Notez que le dernier pcorrespond également dans cet exemple.



8

+présente l'un des sélecteurs relatifs. Liste de tous les sélecteurs relatifs:

div p- Tous les <p>éléments à l'intérieur des <div>éléments sont sélectionnés.

div > p- Tous les <p>éléments dont le parent direct est <div>sélectionné. Cela marche aussi en arrière ( p < div)

div + p- Tous les <p>éléments sont placés immédiatement après la <div>sélection de l'élément.

div ~ p- Tous les <p>éléments précédés d'un <div>élément sont sélectionnés.

Pour en savoir plus sur les sélecteurs, cliquez ici .


Le dernier sélecteur se trompe. Selon MDN : le combinateur général (~) sépare deux sélecteurs et ne correspond au deuxième élément que s'il suit le premier élément (mais pas nécessairement immédiatement), et les deux sont des enfants du même élément parent
Carles Alcolea

2

Il sélectionne le paragraphe suivant et met en retrait le début du paragraphe à partir de la gauche comme vous le feriez dans Microsoft Word.


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.

la sortie finale ressemble à ceci

entrez la description de l'image ici


1

Le Plus (+) sélectionnera le premier élément immédiat. Lorsque vous utilisez le sélecteur +, vous devez donner deux paramètres. Cela sera plus clair par exemple: ici div et span sont des paramètres, donc dans ce cas, seul le premier span après le div sera stylisé.

 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>

Le style ci-dessus ne s'applique qu'à la première travée après la division. Il est important de noter que la deuxième plage ne sera pas sélectionnée.


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.