zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden :nth-child / :nth-of-type und Klassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.03.2011, 17:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.11.2005
Beiträge: 13
UnnamedProphet befindet sich auf einem aufstrebenden Ast
Standard :nth-child / :nth-of-type und Klassen

Hallo,
wenn ich folgenden Code habe
HTML-Code:
<div id="eins">
	<div class="breit"></div>
	<div class="schmal"></div>
	<div class="schmal"></div>
	<div class="schmal"></div>
	<div class="schmal"></div>
	<div class="schmal"></div>
	<div class="schmal"></div>
</div>
und von den divs mit der Klasse "schmal" jedes dritte auswählen will, würde müsste ich die divs ja nach der Klasse auswählen, was etwa so aussehen müsste:

HTML-Code:
#eins div.schmal:nth-child(3n+1) {
	...
}
Bei mir wird die Klasse jedoch nicht angenommen. Es werden alle divs gezählt, unabhängig von den zugewiesenen Klassen.
Habe ich irgend einen Fehler gemacht oder ist das richtig so?

Bislang habe ich mir mit:
HTML-Code:
<style type="text/css">
#eins span:nth-of-type(3n+1) {
	...
}
</style>

<div id="eins">
	<span class="breit"></span>
	<div class="schmal"></div>
	<div class="schmal"></div>
	<div class="schmal"></div>
	<div class="schmal"></div>
	<div class="schmal"></div>
	<div class="schmal"></div>
</div>
ausgeholfen.
Ich fände es jedoch besser, wenn man sich dazu der Klassen bedienen kann.
Gibt es da eine Möglichkeit oder ist das nicht so gedacht?

Danke

Geändert von UnnamedProphet (16.03.2011 um 17:24 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.03.2011, 17:54
Benutzerbild von Chris2011
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.01.2011
Beiträge: 301
Chris2011 befindet sich auf einem aufstrebenden Ast
Standard

ich kann dir sagen wie du es mit jQuery machst

Nur mit CSS geht das meiner Meinung nicht. Da musst du den noch id´s geben

Geändert von Chris2011 (16.03.2011 um 17:58 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.03.2011, 18:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.11.2005
Beiträge: 13
UnnamedProphet befindet sich auf einem aufstrebenden Ast
Standard

Ich suche eigentlich nach einer Lösung die kein JS erfordert.

Wenn ich den einzelnen divs ids geben würde, wäre der Sinn des automatischen Zählens dahin. Ich könnte dann genau so gut den gewünschten divs eine zweite Klasse zuordnen.
Mit Zitat antworten
  #4 (permalink)  
Alt 16.03.2011, 18:26
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.826
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von Chris2011 Beitrag anzeigen
Da musst du den noch id´s geben
Mit id´s gehts sicher nicht. Und auch IDs sind nicht nötig.

Dein Fehler ist leider ein Denkfehler. :nth-child und :nth-of-type zählen immer alle Kindelemente bzw alle Elemente eines Typs. Selektiert werden die Elemente jedoch nur wenn weitere Bedingungen erfüllt sind.

Am besten versuchst du Selektoren von rechts nach links zu lesen:

div.schmal:nth-child(3n+1) liest sich also: Selektiere jedes dritte Kindelement, (aber nur) wenn es sich um ein div-Element mit der Klasse schmal handelt.

Anhand deines Quelltextaufbaus und der uninformativen Klassennamen wage ich eine Vermutung: Du willst eine Liste mit einer Übschrift. Dann würde ich dir raten: eines der sechs Überschriftenelemente (h1 bis h6) sowie eine geordnete oder ungeordnete Liste (ol bzw. ul mit li-Kindern).
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
  #5 (permalink)  
Alt 16.03.2011, 18:27
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Ich weiß nicht, wo dein Problem ist, aber bei mir werden nur die divs mit Klasse berücksichtigt...

HTML-Code:
<!doctype html>
<html>

<head>
	<title>Titel</title>

	<meta charset="UTF-8" />
	<meta name="description" content="" />
	<meta name="author" content="" />
	<meta name="keywords" content="" />
<style type="text/css">
#eins div.schmal:nth-child(3n+1) {
background:#f00;
}</style>
</head>

<body>
<div id="eins">
	<div class="breit">breit</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div>test</div>
	<div>test</div>
	<div>test</div>
	<div>test</div>
	<div>test</div>
	<div>test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div>test</div>
	<div>test</div>
	<div>test</div>
	<div>test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
</div>
</body>
</html>
Mit Zitat antworten
  #6 (permalink)  
Alt 16.03.2011, 18:36
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.826
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von cebito Beitrag anzeigen
Ich weiß nicht, wo dein Problem ist, aber bei mir werden nur die divs mit Klasse berücksichtigt...
Füg am Anfang nochmal ein div mit Klasse breit ein, dann siehst du, dass du hier nur zufällig die richtigen Ergebnisse erhalten hast.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.

Geändert von gato (16.03.2011 um 19:03 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 16.03.2011, 18:59
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Aah, danke, man lernt nie aus
Mit Zitat antworten
  #8 (permalink)  
Alt 16.03.2011, 22:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.11.2005
Beiträge: 13
UnnamedProphet befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von gato Beitrag anzeigen
Anhand deines Quelltextaufbaus und der uninformativen Klassennamen wage ich eine Vermutung: Du willst eine Liste mit einer Übschrift. Dann würde ich dir raten: eines der sechs Überschriftenelemente (h1 bis h6) sowie eine geordnete oder ungeordnete Liste (ol bzw. ul mit li-Kindern).
Also ich habe mein Ziel jetzt mal veranschaulicht:


Hier die programmierte Version dazu:
http://www.prophet-design.de/temp/nth-test.html

Zitat:
Zitat von gato Beitrag anzeigen
div.schmal:nth-child(3n+1) liest sich also: Selektiere jedes dritte Kindelement, (aber nur) wenn es sich um ein div-Element mit der Klasse schmal handelt.
Genau das ist das was ich will, allerdings wird der Teil "mit der Klasse schmal" ingnoriert, wie man in der programmierten Version sieht.
Wenn er nur die divs mit der Klasse "schmal" zählen würde, wäre der Block unter dem breiten div genau so formatiert, wie in der oberen Version.
Der breite Block wird jedoch mitgezählt.
Mit Zitat antworten
  #9 (permalink)  
Alt 17.03.2011, 17:26
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.826
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von UnnamedProphet Beitrag anzeigen
Also ich habe mein Ziel jetzt mal veranschaulicht:
Also eine Tabelle mit und ohne Überschrift (caption)?

Wenn die beiden beispiele genau so vorkommen sollen, kannst du entweder eine ID "zwei" vergeben und für diese eben andere Regeln erstellen (4n+1?) oder uns mitteilen, welche Inhalte du darstellen möchtest. Dann wissen wir welche Elemente du brauchst und ob sich dein Problem allein dadurch schon lösen lässt.

Zitat:
Zitat von UnnamedProphet Beitrag anzeigen
Hier die programmierte Version dazu:
http://www.prophet-design.de/temp/nth-test.html
Programmier ist hier nichts

Zitat:
Zitat von UnnamedProphet Beitrag anzeigen
Genau das ist das was ich will, allerdings wird der Teil "mit der Klasse schmal" ingnoriert, wie man in der programmierten Version sieht.
Wenn er nur die divs mit der Klasse "schmal" zählen würde, wäre der Block unter dem breiten div genau so formatiert, wie in der oberen Version.
Der breite Block wird jedoch mitgezählt.
Nein, nein. Du willst, dass nur die Elemente mit der Klasse schmal gezählt werden. Das ist etwas anderes.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 17.03.2011, 17:46
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Ohne es genau herausgelesen zu haben:

Selectors Level 3

geht es m.E. bei "nth-of-type" nur um das Element, nicht um den (Klassen)Selektor. Der wird offenbar ignoriert. Folglich wird dein Bemühen hier keinen Erfolg haben.

Ersatzweise könntest Du es mal mit .schmal ohne div-Bezeichner versuchen (der dann überflüssig wäre). (Ih glaube nicht an einen Erfolg, aber schön wärs ja)

Was bleibt, ist, das Element mit der Klasse breit auszutauschen, z.B. durch ein span, das als Blockelement gesetzt ist. nth-of-type würde in diesem Fall das span nicht mitzählen und so funktionieren wie gewünscht.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Xampp murrt Schelm.isch Serveradministration und serverseitige Scripte 2 23.06.2008 18:11
Liste im IE StarSt0rm CSS 3 22.08.2007 20:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:19 Uhr.