CSS Selektor

[j4nk3y]

Hey,

stehe grad vor einem kleinen Problem, denn ich finde die richtige Frage nicht. Mit CSS spreche ich folgende Elemente wie folgt an:

.wrapper > .btn{}
.wrapper > .btn:before{}
.wrapper > .btn:hover:before{}

Jetzt würde ich gerne einem Element .btn eine Klasse class="btn active" hinzufügen (Jquery, kein ding) um den gleichen Effekt wie für

.wrapper > .btn:hover:before{}

zu erhalten. Aber wie ist die Anweisung dafür? Etwas wie,:

.wrapper > .active [.?.] .btn:before{}

denke ich mir gerade.

Gruß
Jo

[Matthias Apsel]

Hallo j4nk3y,

.wrapper > .btn{}
.wrapper > .btn:before{}
.wrapper > .btn:hover:before{}

before ist ein Pseudoelement - zwei Doppelpunkte.

Eine Klasse btn?? Es gibt doch button-Elemente.

class="btn active"

Aber wie ist die Anweisung dafür?

Ich denke, im Wiki wirst du fündig.

Bis demnächst
Matthias

[j4nk3y]

Hallo Matthias,

.wrapper > .btn{}
.wrapper > .btn:before{}
.wrapper > .btn:hover:before{}

before ist ein Pseudoelement - zwei Doppelpunkte.

Ok, aber macht das einen unterschied? Das Ergebnis ist ja das selbe.

Eine Klasse btn?? Es gibt doch button-Elemente.

Naja, die Klasse heißt c_btn.

class="btn active"

Aber wie ist die Anweisung dafür?

Ich denke, im Wiki wirst du fündig.

Hm, ich sehe nicht wie das aussehen soll.

.wrapper > .c_btn:hover:before,
.wrapper > .active [...] .c_btn::before
{Anweisung}

Wie sage ich dem Pseudoelement von .c_btn, dass diese Anweisung auch gelten soll wenn c_btn die Klasse active besitzt? Ist das Pseudoelement ein Kind von .c_btn? So sieht es jedenfalls in der Entwicklerumgebung von Chrome aus:

<button class="c_btn">
::before
::after
</button>

Ah ok, hab grade meinen Denkfehler gefunden. Dachte ich muss c_btn::before über active ansprechen aber ein simples:

.wrapper > .c_btn:hover:before,
.wrapper > .active::before
{Anweisung}

Tut es ja schon. Danke schön.

Gruß
Jo

[Matthias Apsel]

Hallo j4nk3y,

before ist ein Pseudoelement - zwei Doppelpunkte.

Ok, aber macht das einen unterschied? Das Ergebnis ist ja das selbe.

Nein, dank der Abwärtskompatibilität der Browser.

Wie sage ich dem Pseudoelement von .c_btn, dass diese Anweisung auch gelten soll wenn c_btn die Klasse active besitzt?

Gar nicht. Der Selektor .c_btn::before greift auch, wenn das Element noch weitere Klassen besitzt.

Ist das Pseudoelement ein Kind von .c_btn?

Nein.

.wrapper > .c_btn:hover:before,
.wrapper > .active::before
{Anweisung}

Tut es ja schon.

Dass das dein Ziel war, konnte ich dem OP nicht entnehmen.

Aber: Vernachlässige die Tastaturbenutzer nicht. Wo immer :hover steht, darf :focus nicht fehlen.

Bis demnächst
Matthias

[dedlfix]

Tach!

Eine Klasse btn?? Es gibt doch button-Elemente.

Wenn das Ding aber nur wie ein Button aussehen soll, aber eigentlich ein Link ist, dann ...

class="btn active"

Aber wie ist die Anweisung dafür?

.btn.active direkt hintereinander ohne Leerzeichen, wenn es beide Klassen haben soll.

dedlfix.

[Matthias Apsel]

Hallo dedlfix,

.btn.active direkt hintereinander ohne Leerzeichen, wenn es beide Klassen haben soll.

Ich weiß das doch 😉

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@dedlfix

Wenn das Ding aber nur wie ein Button aussehen soll, aber eigentlich ein Link ist, dann ...

… sollte man nochmals darüber nachdenken, ob man einen Link wirklich wie einen Button aussehen lassen sollte.

LLAP 🖖

[dedlfix]

Tach!

Wenn das Ding aber nur wie ein Button aussehen soll, aber eigentlich ein Link ist, dann ...

… sollte man nochmals darüber nachdenken, ob man einen Link wirklich wie einen Button aussehen lassen sollte.

Ich denke nicht nur dann nach. Und ja, warum nicht, wenn es technisch gesehen ein Link ist, ansonsten aber ein Bedienelement darstellt? Zum Beispiel in einer Pagination ist es doch nicht verkehrt, wenn da Buttons zu sehen sind, oder was spricht dort dagegen?

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

… sollte man nochmals darüber nachdenken, ob man einen Link wirklich wie einen Button aussehen lassen sollte.

Ich denke nicht nur dann nach. Und ja, warum nicht, wenn es technisch gesehen ein Link ist, ansonsten aber ein Bedienelement darstellt? Zum Beispiel in einer Pagination ist es doch nicht verkehrt, wenn da Buttons zu sehen sind, oder was spricht dort dagegen?

Generell sollte ein Bedienelement so aussehen, dass seine Funktion intuitiv erkennbar ist. Man kann Checkboxen rund machen und Radiobuttons eckig; das wäre aber völliger Unsinn.

Man kann eine Front von Glastüren so gestalten, dass sie eben wie eine Glasfront aussieht und nicht erkennen lässt, wie man da durchkommt. Und wenn man doch erahnen kann, wo eine Tür ist, einem verborgen bleibt, zu welcher Seite sie sich öffnen lässt. Das mag „chic“ aussehen, ist aber schlechtes Design.

Klar mag es Spezialfälle geben, wo es zwar technisch ein Link zu einer anderen Ressource ist, sich für Nutzer aber anfühlt wie eine Aktion auf den vorhandenen Daten. In dem Fall darf dann ein a-Element vielleicht auch aussehen wie ein Button.

LLAP 🖖

[Gunnar Bittersmann]

@@j4nk3y

Jetzt würde ich gerne einem Element .btn

Wozu die Klasse gut sein soll, wurde ja schon gefragt.

eine Klasse class="btn active" hinzufügen

Aber wozu soll die Klasse gut sein? Wann soll die gesetzt werden? Vermutlich gibt es etwas Sinnvolleres dafür.

LLAP 🖖

[j4nk3y]

@@Gunnar

Aber wozu soll die Klasse gut sein? Wann soll die gesetzt werden? Vermutlich gibt es etwas Sinnvolleres dafür.

Wo ich drüber nachdenke, eigentlich brauch ich die nur um in dem CSS zu wissen, welcher Bereich gerade aktiv ist.

Gruß
Jo

[Gunnar Bittersmann]

@@j4nk3y

Aber wozu soll die Klasse gut sein? Wann soll die gesetzt werden? Vermutlich gibt es etwas Sinnvolleres dafür.

Wo ich drüber nachdenke, eigentlich brauch ich die nur um in dem CSS zu wissen, welcher Bereich gerade aktiv ist.

Was heißt das: „Bereich gerade aktiv“? Womöglich etwas, was mit aria-current gekennzeichnet werden sollte? Und dann brauchst du die Klasse nicht.

LLAP 🖖