Auswahl für ein Tag direkt gefolgt von einem anderen Tag

88

Damit werden alle <B>Tags direkt voran von <A>tags:

A+B {
    /* styling */
}

Was ist die Auswahl für alle <A>Tags, direkt gefolgt von <B>Tags?

Hier ist ein Beispiel-HTML, das zu meiner Frage passt:

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

css css-selectors

— Mostafa Farghaly
quelle

3

Bitte geben Sie uns ein DOM-Beispiel, wie Aund Bverwandt sind.

— Gumbo

2

Sie sind insofern verwandt, als sie Geschwister sind, und auf B folgt A. Das OP möchte alle bs auswählen, auf die s folgt a, ähnlich wie a+bSie alle bs auswählen können , denen direkt vorangestellt ist a.

— Anthony

Gibt es 2,5 Jahre später ein Update zu dieser Antwort? Ich suche auch nach a, gefolgt von b.

— Chovy

29

Sie können nicht in CSS.

Bearbeiten: Um etwas hilfreicher zu sein, können Sie beispielsweise jQuery (eine JavaScript-Bibliothek) verwenden .prev().

— Jeroen
quelle

es

— näht

2

Danke jeroen! Das hat mein Problem behoben. Da mein "A" nach links und "B" nach rechts schwebt, war es egal, in welcher Reihenfolge ich das Markup platziere.

— BobRodes

53

Wollen Sie A stylen, wenn es ein B-Element direkt enthält oder folgt? So was:

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

// OR

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

So etwas kann man (noch) nicht in CSS machen. Eric Meyer gibt an, dass diese Art von Selektor einige Male auf der CSS-Mailingliste diskutiert wurde und nicht machbar ist. Dave Hyatt, einer der wichtigsten WebKit-Entwickler, erklärt mit einer guten Erklärung, warum dies nicht möglich ist.

Check out: Shaun Inmans Blogpost und der Kommentar von Eric Meyer .
David Hyatt wiegt auch.

— Nick Presta
quelle

Ich meine das zweite, ich verstehe das Problem, danke Nick :)

— Mostafa Farghaly

17

Sie können NUR das Gegenteil tun: Hiermit werden alle Tags ausgewählt, denen direkt Tags vorangestellt sind.

Dies entspricht logisch Ihrer Anfrage.

Ich benutze dies oft, um eine Reihe von vielen Kontrollkästchen mit Beschriftungen zu gestalten

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
quelle

3

Ich denke, Sie wollten "Eingabe + Beschriftung" in das CSS eingeben, damit der linke Rand auf die Beschriftung angewendet wird.

— CAK2

1

@ CAK2 - Ich denke er meinte es richtig. Dabei wird label+inputder Rand ab dem zweiten auf alle inputElemente angewendet . Es ist eine kreative Möglichkeit, Platz zwischen ihnen zu schaffen, jedoch nicht am Anfang oder am Ende der Reihe. In diesem Fall entspricht es . input:not(:first-child)

— David

1

Obwohl es nicht sehr praktisch ist, können Sie dieses Verhalten heutzutage erreichen, indem Sie die Reihenfolge Ihrer Elemente sowohl beim Generieren des HTML-Codes als auch beim Anwenden der CSS-Regeln umkehren: display: flexundflex-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>

Erweitern Sie das Snippet

Wenn Sie zwei oder mehr Inline-Elemente haben, können Sie dies auch durch Anwenden erreichen float: right, da diese in umgekehrter Reihenfolge angezeigt werden:

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>

Erweitern Sie das Snippet

— Mihai Matei
quelle