Antworten auf deine Fragen:
Neues Thema erstellen

nth-child funktioniert nicht mit selbstdefinierter Klasse

Andimau

Nicht mehr ganz neu hier

Hallo

bin mir nicht sicher, ob es hier überhaupt eine Lösung gibt. Auf alle Fälle funktioniert nth-child nicht.

Oder funktionieren diese nur auf Hauptselektoren wie h1, tr ?

Danke für eure Tipps!


.arconix-box-gray, .arconix-box-grey:nth-child(1) {
border-left: 5px solid #004639 }

.arconix-box-gray, .arconix-box-grey:nth-child(2) {
border-left: 5px solid #374F75 }

.arconix-box-gray, .arconix-box-grey:nth-child(3) {
border-left: 5px solid #0082A6 }

.arconix-box-gray, .arconix-box-grey:nth-child(4) {
border-left: 5px solid #6BA63F }

.arconix-box-gray, .arconix-box-grey:nth-child(5) {
border-left: 5px solid #F8B442 }

.arconix-box-gray, .arconix-box-grey:nth-child(6) {
border-left: 5px solid #0082A6 }
 

dn3d_fanboy

Aktives Mitglied

Versuche hier:

.arconix-box-gray, .arconix-box-grey:nth-child(1) {
border-left: 5px solid #004639 }

mal

.arconix-box-grey:first-child {
border-left: 5px solid #004639 }


Am besten zeigst du uns auch den dazu passenden HTML-Code oder lädst alles mal bei https://jsfiddle.net/ hoch.

[EDIT]
Ist es richtig, dass die beiden Klassen, die du ansprichst, verschiedene Namen haben:
.arconix-box-gray und
.arconix-box-grey
?
 
Zuletzt bearbeitet:

Orlandoo

Nicht mehr ganz neu hier

"nth-child()" funktioniert mit Klassen ganz hervorragend. Wie dn3d_fanboy schon bemerkt hat, liegt die Vermutung nahe, dass du beide Male gr*y entweder mit "a" oder "e" schreiben musst. Falls das nicht zu dem gewünschten Ergebnis führt, müsstest du uns mal den zugehörigen HTML-Code verraten.
 

cebito

undefined

Du möchtest jeweils das nth-Element zweier verschiedener Klassen gleichzeitig ansprechen? Wenn ja, dann so:

Code:
.arconix-box-gray:nth-child(1), .arconix-box-grey:nth-child(1) {
border-left: 5px solid #004639 }

Sonst gilt für .arconix-box-gray egal welches child IMMER nur das, was als letztes im CSS notiert ist.Das HTML dazu wäre auch hilfreich um gezielter zu antworten.
 

Andimau

Nicht mehr ganz neu hier

Hallo

in fiddle habe ich getestet und es funktioniert auch!

CSS
.box-grey:nth-child(1) { position: relative; clear: both; margin: 1em 0; padding: 1em; background-color: #ccc; border-left:5px solid #cccccc;}
.box-grey:nth-child(2) { position: relative; clear: both; margin: 1em 0; padding: 1em; background-color: #ccc; border-left:5px solid #000000;}

HTML
<div class="box-grey">das ist ein Test</div>
<div class="box-grey">das ist ein Test2</div>


Allerdings habe ich den Code ja jetzt direkt in Wordpress im Artikel unter (Visuell/Text) -> Text eingefügt.
Hier erscheint das 1.Child einwandfrei. Das zweite Child nicht. (greift anscheinend nicht, aber warum?!)
Versteh ich nicht....
 
Zuletzt bearbeitet:

dn3d_fanboy

Aktives Mitglied

Deine Website hat einen Verzeichnisschutz und deshalb kann das Bild nicht geöffnet werden. ;-)

Den HTML-Code hast du in den WP-Beitrag unter Text eingefügt, verstehe ich das richtig?
Der CSS-Code ist dann in der style.css oder wo?
 

Andimau

Nicht mehr ganz neu hier

Habe den Fehler entdeckt.

Problem war folgendes:


Hatte das Plugin Arconix Shortcodes im Einsatz (gehabt)
Allerdings gab es hier Probleme beim Laden mit meinem Theme (Tabs) Anscheind hat das Jquery nicht richtig geladen. Oder es gab einen Konflikt. Dass CSS hat somit aufgehört vollständig zu laden.
Habe das Plugin jetzt deaktiviert.
Nun funktioniert mein manuell erstellter CSS code.
 

Andimau

Nicht mehr ganz neu hier

Habe den Fehler entdeckt.

Problem war folgendes:


Hatte das Plugin Arconix Shortcodes im Einsatz (gehabt)
Allerdings gab es hier Probleme beim Laden mit meinem Theme (Tabs) Anscheind hat das Jquery nicht richtig geladen. Oder es gab einen Konflikt. Dass CSS hat somit aufgehört vollständig zu laden.
Habe das Plugin jetzt deaktiviert.
Nun funktioniert mein manuell erstellter CSS code.
 

Andimau

Nicht mehr ganz neu hier

Habe den Fehler entdeckt.

Problem war folgendes:

Hatte das Plugin Arconix Shortcodes im Einsatz (gehabt)

Allerdings gab es hier Probleme beim Laden mit meinem Theme (Tabs) Anscheind hat das Jquery nicht richtig geladen. Oder es gab einen Konflikt. Dass CSS hat somit aufgehört vollständig zu laden.

Habe das Plugin jetzt deaktiviert.

Nun funktioniert mein manuell erstellter CSS code.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben