CSS Selektoren zwei Klassen mit Leerzeichen ansprechen

[Jörg]

Hallo zusammen,

Immer wieder fehlt es mir generell an einer Kenntnis

Wie steuere i ich in einer CSS-Datei Selektoren an, die mit einem Leerzeichen getrennt sind? Beispiel:

Im Browser unter "Untersuchen" kann ich Attribute (z.B. margin) problemlos einstellen für: "ginput_container ginput_container_consent"

Es handelt sich um eine "div".

Aber wie steuer ich die in meiner CSS Datei an?

.ginput_container .ginput_container_consent { margin: -20px; }

zeigt keine Reaktion!

Bei Selektoren mit Leerzeichen stehe ich immer wieder auf dem Schlauch. Kann mir jemand helfen?

Jörg

[Tabellenkalk]

Hallo,

Das Leerzeichen ist für CSS-Selektoren ein sogenannter Kombinator.

Wenn du dem "div" (Warum eigentlich div und nichts Spezifischeres?) zwei Klassen zu ordnest, werden die im HTML natürlich mit Leerzeichen getrennt. Im CSS reicht es eigentlich, eine von beiden anzusprechen. Wenn du wirklich beide verwenden musst, lässt du das Leerzeichen weg.

Gruß
Kalk

[JKamphaus]

Hallo,

und vielen Dank für Deine direkte Antwort.

Leider komme ich damit nicht weiter und vermutlich liegt es an meiner Darstellung meines Problems.

In einem Formular habe ich eine Bestätigung zur Datenspeicherung:

Die komplette Div lautet:

<div class="ginput_container ginput_container_consent"><input name="input_11.1" id="input_7_11_1" type="checkbox" value="1" tabindex="13" aria-describedby="gfield_consent_description_7_11" aria-required="true" aria-invalid="false"> <label class="gfield_consent_label" for="input_7_11_1">Zustimmung zur Datenspeicherung</label><input type="hidden" name="input_11.2" value="Zustimmung zur Datenspeicherung" class="gform_hidden"><input type="hidden" name="input_11.3" value="28" class="gform_hidden"></div>

ich möchte eigentlich in der CSS datei die Div nur um 25px nach oben verschieben, also margin: -25px;

Ich schaffe es aber nicht die Div komplett anzusprechen, wie mache ich das in diesem Beispiel?

Jörg

[Felix Riesterer]

Lieber Jörg,

Die komplette Div lautet:

<div class="ginput_container ginput_container_consent">...</div>
[...]
Ich schaffe es aber nicht die Div komplett anzusprechen, wie mache ich das in diesem Beispiel?

.ginput_container.ginput_container_consent {
  margin-top: -20px;
}

Bist Du sicher, dass dieses <div> mehrmals auf einer Seite stehen kann? Wenn dem nämlich nicht so wäre, fände ich die Verwendung einer ID sinnvoller:

<div id="consent">...</div>

In CSS selektiert man das dann so:

#consent {
  margin-top: -20px;

Liebe Grüße

Felix Riesterer

[JKamphaus]

Hallo,

Das gesamte Formular, also der gesamte HTML Bereich wird mir durch einen form tag vorgegeben. Gravity Forms in Wordpress. Ich kann also nicht entscheiden, was eine Id oder eine Class sein soll.

Ich möchte nur das Formular etwas stylen, insbesondere nicht so lang haben und möchte daher die Bestätigung nur etwas nach oben schieben deshalb ein "margin-top: -20px;"

Ich konnte inzwischen das Feld direkt ansprechen, was für meine Zwecke auch funktioniert.

Danke an alle in diesem Forum-Thread. Ihr hab mich direkt und/oder indirekt auf den rechten Weg gebracht. :-) ...und gelernt habe ich auch wieder was. :-)

Danke.

Jörg

[Auge]

Hallo

Wie steuere i ich in einer CSS-Datei Selektoren an, die mit einem Leerzeichen getrennt sind?

Im Browser unter "Untersuchen" kann ich Attribute (z.B. margin) problemlos einstellen für:
ginput_container ginput_container_consent

Es handelt sich um eine "div".

Wir sprechen wirklich von einem Element mit beiden Klassen? Also:

<div class="ginput_container ginput_container_consent">…</div>

Aber wie steuer ich die in meiner CSS Datei an?

.ginput_container .ginput_container_consent {
   margin: -20px;
}

zeigt keine Reaktion!

Mit dieser Notation sprächest du ein Element mit der Klasse „ginput_container_consent“ an, das in einem Element mit der Klasse „ginput_container“ steckt. Also:

<div class="ginput_container"><p class="ginput_container_consent">…</p></div>

Wenn du aber, wie oben vermutet, ein Element mit beiden Klassen ansprechen willst, lasse im CSS-Selektor das Leerzeichen zwischen den Klassennamen weg. Also:

.ginput_container.ginput_container_consent {
   margin: -20px;
}

Nebenbei gefragt, warum brauchst du den negativen Abstand?

Tschö, Auge

[ottogal]

Schau mal hier nach:
https://wiki.selfhtml.org/wiki/CSS/Selektoren/Klassenselektor
(insbesondere den ersten Hinweis "Beachten Sie")