Sélecteur d'un tag directement suivi d'un autre tag

88

Ceci sélectionne toutes les <B>balises directement précédées par des <A>balises:

A+B {
    /* styling */
}

Quel est le sélecteur pour toutes les <A>balises directement suivies de<B> balises?

Voici un exemple de HTML correspondant à ma question:

<a>some text</a>
<b>some text</b>

css css-selectors

— Mostafa Farghaly
source

3

Veuillez nous donner un exemple DOM comment Aet Bsont liés.

— Gumbo le

2

Ils sont liés en ce qu'ils sont frères et sœurs, et B est suivi de A. L'OP veut sélectionner tous les bs qui sont suivis de as, comme dans le a+bcas où vous pouvez sélectionner tous les bs précédés directement de a.

— Anthony

2,5 ans plus tard, y a-t-il une mise à jour de cette réponse? Je cherche également à cibler a suivi de b.

— chovy

29

Vous ne pouvez pas en CSS.

Edit: Pour être un peu plus utile, si vous utilisez par exemple jQuery (une bibliothèque JavaScript), vous pouvez utiliser .prev().

— jeroen
source

il semble que la seule solution utilise JavaScript

— Mostafa Farghaly

2

Merci jeroen! Cela a résolu mon problème. Puisque mon "A" flotte à gauche et "B" flotte à droite, peu importe dans quel ordre j'ai mis le balisage.

— BobRodes

53

Voulez-vous styler A étant donné qu'il a un élément B directement à l'intérieur ou suivi? Comme ça:

<A>
    <B>
    </B>
</A>

// OR

<A>
</A>
<B>
</B>

Vous ne pouvez pas (encore) faire une telle chose en CSS. Eric Meyer déclare que ce type de sélecteur a été discuté plusieurs fois sur la liste de diffusion CSS, et n'est pas faisable. Dave Hyatt, l'un des principaux développeurs WebKit, commente avec une bonne explication des raisons pour lesquelles cela ne peut pas être fait.

Découvrez: le billet de blog de Shaun Inman et le commentaire d'Eric Meyer .
David Hyatt intervient également.

— Nick Presta
source

je veux dire le second, je comprends le problème merci nick :)

— Mostafa Farghaly

17

Vous pouvez UNIQUEMENT faire la conversation: Ceci sélectionne toutes les balises directement précédées par des balises.

Ceci est logiquement équivalent à votre demande.

J'utilise souvent ceci pour styliser une rangée de nombreuses cases à cocher avec des étiquettes

CSS:

label+input {
    margin-left: 4px;
}

DOM:

<input id="a" name="a" type="checkbox"/><label for="a">...</label>
<input id="b" name="b" type="checkbox"/><label for="b">...</label>
<input id="c" name="c" type="checkbox"/><label for="c">...</label>

— Marco Marsala
source

3

Je pense que vous vouliez taper "entrée + étiquette" dans le CSS afin que la marge gauche soit appliquée à l'étiquette.

— CAK2

1

@ CAK2 - Je pense qu'il le pensait bien. En faisant, label+inputla marge est appliquée à tous les inputéléments à partir du second . C'est une manière créative de créer de l'espace entre eux, mais pas au début ni à la fin de la rangée. Dans ce cas, il équivaut à input:not(:first-child).

— David

1

Bien que ce ne soit pas très pratique, de nos jours, vous pouvez obtenir ce comportement en inversant l'ordre de vos éléments à la fois lorsque vous générez le HTML et en appliquant les règles CSS: display: flexetflex-direction: column-reverse

ul {
  display: flex;
  flex-direction: column-reverse;
}

.b ~ .a {
  color: red;
}

<ul>
    <li class="a">A 3</li>
    <li class="c">C 2</li>
    <li class="c">C 1</li>
    <li class="b">B 1</li>
    <li class="a">A 2</li>
    <li class="a">A 1</li>
</ul>

Développer l'extrait

De plus, si vous avez 2 éléments en ligne ou plus, vous pouvez y parvenir en appliquant float: right, car ils seront affichés dans l'ordre inverse:

ul {
  float: left;
  list-style-type: none;
}

li {
  float: right;
}

li:not(:first-child) {
  margin-right: 20px;
}

.b ~ .a {
  color: red;
}

<ul>
    <li class="a">A 3</li>
    <li class="c">C 2</li>
    <li class="c">C 1</li>
    <li class="b">B 1</li>
    <li class="a">A 2</li>
    <li class="a">A 1</li>
</ul>

Développer l'extrait

— Mihai Matei
source