Gerade und ungerade childs auswählen

[be-tina]

Ich habe aus dem Buch von Peter Müller "Flexible Boxes" das Auswählen von ungeraden und geraden childs ausprobiert (Seite 198) - also :nth-child(even) und :nth-child(odd)

Das funktioniert auch gut.

Nur hätte ich gerne, dass nur die childs einer bestimmten Klasse gezählt werden:
.mod_article .bild_halb:nth-child(even) mit entsprechenden Anweisungen und das Gleiche mit …(odd)
Das funktioniert aber nicht.

Ich habe das mit Bilder ausprobiert, die halb so groß sind wie ein Artikel. Das erste, dritte, fünfte … Bild soll links floaten und das zweite, vierte, sechste … Bild soll rechts floaten. Die Bilder haben die Klasse bild_halb

Hier seht ihr meine Experiment-Seite dazu:
http://steinmetz-schleiftechnik.de/_...aktuelles.html

Gibt es dazu eine Lösung oder kann ich nicht ausschließlich childs einer bestimmten Klasse zahlen?

[tab]

The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.

Soviel habe ich jedenfalls bei w3schools dazu gefunden.

.mod_article .bild_halb:nth-child(2n) {
    width: 282px;
    float: right;
    clear: none;
}

So wie ich das verstehe, selektierst du mit deinem obigen Selektor alle Elemente, die dem Selektor .mod_article .bild_halb genügen und gleichzeitig ein geradzahliges Kindelement ihres Elternelements sind, egal was für ein Element und ob die anderen gezählten Elemente gleichartig sind.

Was du suchst, dürfte eher nth-of-type() sein. Getestet habe ich das aber nicht.

Edit: Eigentlich suchst du wohl einen Attribut-Selektor, einfach mal danach googeln

[tab]

Hmm, habe gerade mal angeschaut was du da machen willst, da helfen wohl beide Selektoren nichts. Und eine Kombination gibt es wohl nicht, jedenfalls ist mir das unbekannt.
Was genau willst du denn erreichen? Dass die ".bild_halb" divs immer zu zweien in einer "Zeile" stehen? Kannst du die nicht einfach mit display: inline-block; dazu bringen?

[be-tina]

ja, ich habe es probiert. Geht nicht. Trotzdem interessant, besonders die Seite w3schools.

Das liegt sicher daran, dass eine Klasse nicht als type gesehen wird. :nth-of-class gibt es leider nicht (habe es trotzdem mal probiert. Man weiß ja nie ;-))

Bei inline-block habe ich das Problem, dass das rechte Bild nie genau rechtsbündig zu dem größeren Bild untendrunter ist, weil ich ja dann eine Margin right angeben muss.

[FloB]

Soviel habe ich jedenfalls bei w3schools dazu gefunden.

Obligatorischer Hinweis: http://www.w3fools.com/

[pmmueller]

Hier seht ihr meine Experiment-Seite dazu:
http://steinmetz-schleiftechnik.de/_...aktuelles.html

Die Seite gibt's nicht mehr?

[tschero]

Hi,

hast Du mal das hier probiert?

li:nth-of-type(2n) {
    background-color: #DeineFarbe;
}

Gruß
tschero

[planepix]

@Peter: lass einmal das aktuelles.html in der URL weg, dann klappts

[tab]

Hi,

hast Du mal das hier probiert?

li:nth-of-type(2n) {
    background-color: #DeineFarbe;
}

Gruß
tschero

An der Stelle waren wir schon mal Woran ists gescheitert? Der nth-of-type Ansatz scheitert daran, dass es nicht nur Bilder gibt, von denen zwei nebeneinander passen (Klasse "bild_halb"), sondern dass zwischendurch auch Bilder kommen können, von denen nur eins reinpasst.

Worum geht es eigentlich? Die "halben" Bilder links- und rechtsbündig anzuordnen, zu je zweien nebeneinander und dabei nur die eine Klasse zu verwenden (ansonsten könnte man ja zwei Klassen nehmen "bild_links" und "bildrechts", dann wäre das Problem trivial). So habe ich es jedenfalls verstanden. Warum diese Einschränkung? Vielleicht um weniger Fehlermöglichkeiten zu haben, also nicht versehentlich zweimal hintereinander dieselbe Klasse zuzuordnen. Wer die Klasse überhaupt festlegt und wo, was der gaaanz tiefe Sinn dahinter wirklich ist, das müsst ihr be-tina fragen . Selbst wenn das klappen sollte, wie quasi mit dem nicht existenten nth-of-class, muss man aber IMHO immer noch aufpassen, dass man zwischen linkes und rechtes Bild nicht versehentlich ein ganzes reinmacht oder einen Text, sonst ist das Layout auch am A.... Bild links, rechts frei, dann Text, dann links frei und Bild rechts sieht auch nicht unbedingt besonders schön aus.

[Bas]

Was Du brauchst ist der "General Sibling Selector": ~

Erklärung siehe hier: http://css-tricks.com/almanac/select...neral-sibling/

Und als gaaaaanz dicke Empfehlung bzgl. CSS-Selektoren --> http://flukeout.github.io/

Edit: Evt. eher geeignet "Adjacent Sibling Selector": + (Erklärung und Anwendung ... folge meiner Empfehlung CSS-Diner)