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

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