Selettore per un tag seguito direttamente da un altro tag

88

Questo seleziona tutti i <B>tag direttamente preceduti dai <A>tag:

A+B {
    /* styling */
}

Qual è il selettore per tutti i <A>tag seguito direttamente dai <B>tag?

Ecco un esempio di HTML adatto alla mia domanda:

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

css css-selectors

— Mostafa Farghaly
fonte

3

Per favore, dacci un esempio DOM come Ae Bsono correlati.

— Gumbo

2

Sono correlati in quanto sono fratelli e B è seguito da A. L'OP vuole selezionare tutte le bs seguite da as, in modo simile a a+bdove puoi selezionare tutte le bs precedute direttamente da a.

— Anthony

2,5 anni dopo, c'è qualche aggiornamento a questa risposta? Sto anche cercando di scegliere come target a seguito da b.

— chovy

29

Non puoi in CSS.

Modifica: per essere un po 'più utile, se usi ad esempio jQuery (una libreria JavaScript), puoi usare .prev().

— jeroen
fonte

sembra che l'unica soluzione sia l'utilizzo di JavaScript

— Mostafa Farghaly

2

Grazie jeroen! Questo ha risolto il mio problema. Dal momento che la mia "A" fluttua a sinistra e "B" a destra, non importa in quale ordine ho inserito il markup.

— BobRodes

53

Intendi stile A dato che ha un elemento B direttamente all'interno o seguito? Come questo:

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

// OR

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

Non puoi fare una cosa del genere in CSS (ancora). Eric Meyer afferma che questo tipo di selettore è stato discusso parecchie volte nella mailing list CSS e non è fattibile. Dave Hyatt, uno dei principali sviluppatori di WebKit, commenta con una buona spiegazione del motivo per cui non può essere fatto.

Guarda: il post sul blog di Shaun Inman e il commento di Eric Meyer .
Anche David Hyatt pesa .

— Nick Presta
fonte

intendo il secondo, capisco il problema grazie nick :)

— Mostafa Farghaly

17

Puoi SOLO fare il contrario: seleziona tutti i tag preceduti direttamente dai tag.

Questo è logicamente equivalente alla tua richiesta.

Lo uso spesso per definire una riga di molte caselle di controllo con etichette

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
fonte

3

Penso che volessi digitare "input + label" nel CSS in modo che il margine sinistro venga applicato all'etichetta.

— CAK2

1

@ CAK2 - Penso che intendesse bene. In questo modo label+inputil margine viene applicato a tutti gli inputelementi a partire dal secondo . È un modo creativo per creare spazio tra di loro ma non all'inizio o alla fine della riga. In questo caso, è equivalente a input:not(:first-child).

— David

1

Sebbene non sia molto pratico, al giorno d'oggi potresti ottenere questo comportamento invertendo l'ordine dei tuoi elementi sia quando generi l'HTML che applicando le regole CSS: display: flexeflex-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>

Espandi lo snippet

Inoltre, se hai 2 o più elementi in linea, puoi ottenerlo applicandolo float: right, poiché verranno visualizzati in ordine 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>

Espandi lo snippet

— Mihai Matei
fonte