CSS3 nth-child(n)
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
agent
ansprechen
anweisung
beispiel
browser
code
dritte element
element
first
himmelsrichtung
http
internet
nichtmal
nutzer
paragraph
problem
turnus
umlauf
url
verbleiben
-
Hallo
in der Beschreibung zu CSS
steht:p:nth-child(n)
Selects every <p> element that is the second child of its parent
wenn ich aber als Code habe ... mit n=3
<!DOCTYPE html> <html> <head> <style> p:nth-child(3) { background:#ff0000; } </style> </head> <body> <h1>This is a heading</h1> <p>The first paragraph.</p> <p>The second paragraph.</p> <p>The third paragraph.</p> <p>The fourth paragraph.</p> <p>The fifth paragraph.</p> </body> </html>
dann bekommt nicht das dritte <p> Element die Hintergrund-Farbe, sondern das zweite ?!
also ... its parent ... ist <body> ... aber mit
soll dochp:nth-child(3)
das dritte p Element angesprochen werden, und nicht das zweite ?!?
ok ... da ist noch das <h1> Element, aber das ist ja kein <p> Element,
es wird aber offensichtlich doch mit-gezählt .... ist aber doch unlogisch,
ich will mit der Anweisung doch das dritte <p> Element ansprechen,
und nicht - egal welcher TAG-Name, das (insgesamt) dritte Element ?!
das Gleiche passert, wenn ein <hr /> oder ein <br /> Element dawischen steht,
also ... kann
doch nicht "bestimmte" Elemente zählen,nth-child(n)
sondern zählt einfach alle (DOM) Elemente, egal welche ?
oder ist das ein Bug ? ... bzw. wie muss es aussehen,
wenn ich wirklich nur / direkt das dritte <p> Element ansprechen will,
egal was noch so dazwischen ist (egal ob <h1> oder <hr /> oder ein <br /> etc.)
gleiches Problem bei
(wenn n = ungerade)p:nth-child(odd) { ... }
siehe Beispiel: http://jsfiddle.net/wGVk3/
es soll das erste und das dritte <p> Element angesprochen werden,
aber weil zwischen dem ersten und dem zweiten <p> noch ein <hr /> ist,
wird nicht das dritte, sondern das zweite <p> Element angesprochen.
.... wie kann ich wirklich nur das n-te <p> Element ansprechen (egal was dazwischen) ???
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
live-chat schrieb:
.... wie kann ich wirklich nur das n-te <p> Element ansprechen (egal was dazwischen) ???
Mit
p:nth-of-type(n)
Viele Beispiele zu
*:nth-child(n)
sind tatsächlich irreführend, weil immer von gleichartigen Childelementen ausgegangen wird.
Beitrag zuletzt geändert: 25.3.2014 7:58:01 von mein-wunschname -
jo, DANKE !!!
damit funktioniert es ... hier mein Test-Code:
<!DOCTYPE html> <html> <head> <style type="text/css"> /* ungerade: 1, 3, 5, ... */ p:nth-of-type(odd) { background:#AAAAAA; } /* gerade: 2, 4, 6, ... */ p:nth-of-type(even) { background:#33CCCC; } /* number: n=3 with offset=0 */ p:nth-of-type(3n+0) { background:#FF3333; } /* number: n=4 without offset */ p:nth-of-type(4) { background:#CC00CC; } </style> </head> <body> <h1>Heading One</h1> <p>The first paragraph.</p> <hr /> <h2>Heading Two</h2> <p>The second paragraph.</p> <p>The third paragraph.</p> <p>The fourth paragraph.</p> <p>The fifth paragraph.</p> </body> </html>
oder auch Update bei dem JSFIDDLE Beispiel:
hier: http://jsfiddle.net/wGVk3/1/
Ein Problem damit könnte aber noch sein,
dass der Internet Explorer das nichtmal in der Version 8 unterstützt ... ?!
gefunden in der Doku: http://reference.sitepoint.com/css/pseudoclass-nthoftype
Compatibility: This pseudo-class is currently not supported in Internet Explorer.
so ein mist ... dann wohl doch besser irgendwie mit JS bzw. jQuery machen ?!
PS:
habe was gelesen von CODE und Syntaxhighlighting ...
... siehe hier (Lima-City Forum): syntaxhighlighter-html-script-fuer-php-js
aber sehe keinen Unterschied von
und[code=html] ...[code=jshtml] ...
.. also ist zwar gar kein JS in meinem Quellcode,
aber für CSS + HTML könnte (sollte) man auch Syntaxhighlighting machen,
nur so als Idee
... Leider ist der Beitrag schon "geschlossen" sonst hätte ich das
dort gerne als Antwort (neuen Vorschlag) dazu geschrieben ... CSS + HTML
Beitrag zuletzt geändert: 25.3.2014 8:47:14 von live-chat -
live-chat schrieb:
Ein Problem damit könnte aber noch sein,
dass der Internet Explorer das nichtmal in der Version 8 unterstützt ... ?!
Das habe ich zwar nicht getestet, aber IE8 ist doch wirklich ein alter Hut. Alle Windows-Versionen ab Vista unterstützen mindestens IE9. Verbleiben noch die XP-Nutzer, die keine höhere Version als IE8 einsetzen können.
Wenn nicht gerade Grundfunktionalitäten der Webseite leiden, halte ich persönlich den Einsatz solcher Mittel für vertretbar. -
Also fast 5% der Clients haben noch den IE8 installiert laut statistik. das kommt vor allem durch UNternehmen, mit einer Strikten Administration, welche nicht im Jahres-Turnus den Browser Updaten wollen(weil das für die Menge der Rechner ein unnötiger Aufwand ist, und weil nciht jede Version einen LTE-Support bekommt...). Wenn du schon IE8 ausschließt, würde ich eine Browserweiche einbauen, welche die IE8-Nutzer darauf hiniweist. Browser-Version bekommst du über den User-agent mitgeliefert, um über C# drauf zuzugreifen, ansonsten in PHP über $_SERVER['USER_AGENT'] und kannst dann für die nicht unterstützten Browser eine entsprechende Behandlung einbauen.
esnes kannst du dir aber sicher sein: wenn du dein Zeug für dne IE8 entwickelst und vor allem sauber entwickelst, sieht die eite auf jedem modernen browser gleich aus. du bist zwar zu CSS2.1 gezwungen, müsstest einige Deesign-Dinge über JS realisieren, aber es bleibt kompatibel in alle Himmelsrichtungen(der IE8 ist meiner Erfahrung nach der schlimmste Browser, der sich derzeit im Umlauf befindet, der 7er war besser, kann aber auch kein CSS3, einzige Problem ist da das floaten von Elementen...) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
