Que signifie le sélecteur CSS "+" (signe plus)?
Par exemple:
p + p {
/* Some declarations */
}
Je ne sais pas ce que signifie le +. Quelle est la différence entre ceci et simplement définir un style pour p sans + p?
Ce sélecteur signifie que le style ne s'applique qu'aux paragraphes qui suivent directement un autre paragraphe.
Un sélecteur simple p appliquerait le style à chaque paragraphe de la page.
Voir sélecteurs adjacents sur W3.org.
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 >, en passant.
Voir également la présentation de Microsoft concernant la compatibilité CSS dans Internet Explorer .
C'est le sélecteur de fratrie adjacente.
Pour définir un sélecteur adjacent CSS, le fichier le signe plus est utilisé.
h1+p {color:blue;}Le code CSS ci-dessus formatera le premier paragraphe après (pas à l'intérieur) les h1 positions comme bleu.
h1>p sélectionne tout élément p constituant un enfant direct (de première génération) (à l'intérieur) d'un élément h1.
h1>pcorrespond à<h1><p></p></h1>(<p>à l'intérieur de<h1>)
h1+p sélectionnera le premier élément p qui est un élément frère (au même niveau du dom) qu'un élément h1.
h1+pcorrespond à<h1></h1><p><p/>(<p>à côté de/après<h1>)
Le signe + signifie que vous sélectionnez un adjacent sibling
Exemple:
CSS
p + p
{
font-weight: bold;
}
HTML
Le style s'appliquera à partir du deuxième <p>
<div>
<p></p>
<p></p>
</div>
Exemple
Voir ce Fiddle et vous le comprendrez toujours: http://jsfiddle.net/7c05m7tv/ (Another Fiddle: http://jsfiddle.net/7c05m7tv/70/ )
Prise en charge du navigateur
Les sélecteurs apparentés sont pris en charge dans Internet Explorer 5.x Macintosh. Ils sont également pris en charge dans la version de prévisualisation 1 de Netscape 6 pour toutes les myriades de plates-formes pour lesquelles elle est disponible, ainsi que dans la version de prévisualisation 3 d'Opera 4 pour Windows. La gestion des sélecteurs de même niveau dans IE5 pour Windows et Opera 3 pour Windows présente des bogues.
Bon à savoir: Internet Explorer 7 ne met pas le style à jour correctement lorsqu'un élément est placé dynamiquement avant un élément correspondant au sélecteur. Dans Internet Explorer 8, si un élément est inséré de manière dynamique en cliquant sur un lien, le style premier enfant ne sera pas appliqué tant que le lien n'aura pas le focus.
Apprendre encore plus
"+" est le sélecteur frère adjacent. Il sélectionnera n'importe quel p DIRECTEMENT APRÈS un p (pas un enfant ni un parent cependant, un frère ou une soeur).
Le sélecteur + s'appelleAdjacent Sibling Selector.
Par exemple, le sélecteurp + p, sélectionne les éléments p immédiatement après les éléments p
Cela peut être considéré comme un sélecteur looking outside 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 un même sujet, il convient de mentionner un autre sélecteur,~selector, qui estGeneral Sibling Selector
Par exemple, p ~ p sélectionne toute la p qui suit la p importe peu, mais les deux p devraient 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 la dernière p est également appariée dans cet exemple.
Cela correspond à n'importe quel élément p qui est immédiatement adjacent à un élément 'p'. Voir: http://www.w3.org/TR/CSS2/selector.html
+ présente l'un des sélecteurs relatifs. Liste de tous les sélecteurs relatifs:
div p - Tous les éléments <p> à l'intérieur des éléments <div> sont sélectionnés.
div > p - Tous les éléments <p> dont le parent direct est <div> sont sélectionnés. Cela fonctionne aussi à l'envers (p < div)
div + p - Tous les éléments <p> immédiatement après l'élément <div> sont sélectionnés.
div ~ p - Tous les éléments <p> précédés d'un élément <div> sont sélectionnés.
Pour en savoir plus sur les sélecteurs, consultez ici .
Il sélectionne le paragraphe suivant et indente le début du paragraphe à gauche, comme vous le feriez dans Microsoft Word.
Le Plus (+) sélectionnera le premier élément immédiat. Lorsque vous utilisez + sélecteur, vous devez donner deux paramètres. Ce sera plus clair par exemple: ici div et span sont des paramètres, de sorte que dans ce cas, seule la première étendue après le div sera stylée.
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'appliquera qu'à la première travée après la div. Il est important de noter que la deuxième plage ne sera pas sélectionnée.
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.
sortie finale ressemble à ceci
