nth-child funktioniert nicht mit selbstdefinierter Klasse

[Andimau]

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]

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
?

 

[Orlandoo]

"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]

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

.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]

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....

 

[dn3d_fanboy]

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]

sorry, jetzt müsste das Bild angezeigt werden.

CSS-Code im Child-Them css.

 

[Andimau]

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]

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]

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.