Selector de una etiqueta seguida directamente de otra etiqueta

88

Esto selecciona todas las <B>etiquetas precedidas directamente por <A>etiquetas:

A+B {
    /* styling */
}

¿Cuál es el selector para todas las <A>etiquetas seguidas directamente por <B>etiquetas?

Aquí hay un ejemplo de HTML que se ajusta a mi pregunta:

<a>some text</a>
<b>some text</b>
css css-selectors Mostafa Farghaly
fuente
3
Por favor, danos un ejemplo de DOM cómo Ay Bestán relacionados.
Gumbo
2
Están relacionados porque son hermanos, y B va seguido de A. El OP desea seleccionar todos los bcorreos electrónicos seguidos de alos siguientes, de manera similar a a+bdonde puede seleccionar todos blos correos electrónicos precedidos directamente por a.
Anthony
2.5 años después, ¿hay alguna actualización de esta respuesta? También estoy buscando apuntar a a seguido de b.
Chovy

Respuestas:

29

No puedes en CSS.

Editar: para ser un poco más útil, si usa, por ejemplo, jQuery (una biblioteca de JavaScript), puede usar .prev().

jeroen
fuente
parece que la única solución es usar JavaScript
Mostafa Farghaly
2
¡Gracias jeroen! Eso solucionó mi problema. Como mi "A" flota a la izquierda y la "B" flota a la derecha, no importa en qué orden coloque el marcado.
BobRodes
53

¿Te refieres al estilo A dado que tiene un elemento B directamente dentro o seguido? Me gusta esto:

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

// OR

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

No puedes hacer tal cosa en CSS (todavía). Eric Meyer afirma que este tipo de selector se ha discutido bastantes veces en la lista de correo de CSS y no es factible. Dave Hyatt, uno de los desarrolladores principales de WebKit, comenta con una buena explicación de por qué no se puede hacer.

Echa un vistazo a: la publicación del blog de Shaun Inman y el comentario de Eric Meyer .
David Hyatt también interviene .

Nick Presta
fuente
me refiero al segundo, entiendo el problema gracias nick :)
Mostafa Farghaly
17

SÓLO puede hacer lo contrario: Esto selecciona todas las etiquetas precedidas directamente por etiquetas.

Esto es lógicamente equivalente a su solicitud.

A menudo uso esto para diseñar una fila de muchas casillas de verificación con etiquetas

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
fuente
3
Creo que quiso escribir "entrada + etiqueta" en el CSS para que el margen izquierdo se aplique a la etiqueta.
CAK2
1
@ CAK2 - Creo que lo decía en serio. Al hacerlo, label+inputel margen se aplica a todos los inputelementos a partir del segundo . Es una forma creativa de crear espacio entre ellos, pero no al principio ni al final de la fila. En este caso, es equivalente a input:not(:first-child).
David
1

Aunque no es muy útil, hoy en día podrías lograr este comportamiento invirtiendo el orden de tus elementos tanto cuando generas el HTML como aplicando las reglas CSS: display: flexyflex-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>
Expandir fragmento

Además, si tiene 2 o más elementos en línea, puede lograrlo aplicando float: right, ya que se mostrarán en orden inverso:

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>
Expandir fragmento

Mihai Matei
fuente