zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden :first-of-type

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.06.2013, 14:54
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard :first-of-type

Hallo,

Ich möchte jedes DIV, das direkt auf einen Absatz folgt, selektieren.
Mit diesem Selektor

p + div:first-of-type { ... }

klappt es aber nicht, da er nur das erste DIV innerhalb eines gemeinsamen Eltern-Elements selektiert.

Gibt es eine Möglichkeit, mit CSS die mit einer "1" markierten Boxen anzusprechen, ohne ihnen im markup Klassennamen zuordnen zu müssen?

testdatei

Grüße
Gaby
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.06.2013, 15:13
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.04.2012
Beiträge: 163
schatzi sorgt für eine eindrucksvolle Atmosphäreschatzi sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo!

Mit "+" sprichst du sowieso nur das direkt folgende Element an, daher:

p + div.box {...}
__________________
Gruß schatzi
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.06.2013, 15:17
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

:first-child wäre richtig, wenn dein Div kein Div wäre.
Innerhalb eines P-Elementes dürfen nur Elemente der Gruppe Phrasing vorkommen. Div gehört nicht dazu.

siehe dazu p – paragraph - HTML5
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #4 (permalink)  
Alt 18.06.2013, 15:19
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.04.2012
Beiträge: 163
schatzi sorgt für eine eindrucksvolle Atmosphäreschatzi sorgt für eine eindrucksvolle Atmosphäre
Standard

Das <p>-Tag wird ja vor dem <div> schon wieder geschlossen!
__________________
Gruß schatzi
Mit Zitat antworten
  #5 (permalink)  
Alt 18.06.2013, 15:40
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von schatzi Beitrag anzeigen
Das <p>-Tag wird ja vor dem <div> schon wieder geschlossen!
Dann hast du natürlich recht.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #6 (permalink)  
Alt 18.06.2013, 15:58
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von schatzi Beitrag anzeigen
Hallo!

Mit "+" sprichst du sowieso nur das direkt folgende Element an, daher:

p + div.box {...}
Danke sehr.

Da habe ich wiedermal zu kompliziert gedacht.
Naja, heute habe ich eine prima Ausrede:
Es ist sooooo heiß!


Grüße
gaby
Mit Zitat antworten
  #7 (permalink)  
Alt 18.06.2013, 16:14
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
:first-child wäre richtig, wenn dein Div kein Div wäre.
Innerhalb eines P-Elementes dürfen nur Elemente der Gruppe Phrasing vorkommen. Div gehört nicht dazu.

siehe dazu p – paragraph - HTML5
Hallo explanator,

Div DIVs sind bei mir nur Geschwister von P, nicht Kinder.


Grüße
gaby
Mit Zitat antworten
  #8 (permalink)  
Alt 18.06.2013, 17:06
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von schatzi Beitrag anzeigen
Hallo!

Mit "+" sprichst du sowieso nur das direkt folgende Element an, daher:

p + div.box {...}
Noch eine Frage:

IMO sollte der Selektor auch ohne angehängten Klassennamen funktionieren (in der Ursprungsversion haben diese DIVs im markup keinen Klassennamen)

Es tut sich aber nichts, außer, ich hänge noch ein !important hintendran. Das läßt mich vermuten, daß die Spezifität von
p + div {...}
nicht hoch genug ist, und von einem anderen Selektor deshalb "überschrieben" wird.
Ich finde den Übeltäter aber nicht.
Kann einer von euch bitte nochmal drübergucken?

testdatei
Mit Zitat antworten
  #9 (permalink)  
Alt 18.06.2013, 18:35
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Gib dem div + p mal eine andere Hintergrundfarbe, dann siehst du es.
Mit der Spezifietät liegst du schon ganz richtig.
Du hast eine Klasse .box die deine Border-Eigenschaft überschreibt, bzw. zur Anwendung kommt, obwohl die Regel vor der Regel div + p kommt.

Du kannst also nur folgendes machen in diesem Fall: div + p.class.

Willst du die Klasse .box ganz entfernen, kannst du statt .box dann auch
div div div
oder
.wrapper div div
oder
wrapper div~div nehmen

dann kommt div+p auch jeweils zur Anwendung.

Selectors Level 3
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 18.06.2013, 19:29
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
Willst du die Klasse .box ganz entfernen, kannst du statt .box dann auch
div div div
oder
.wrapper div div
oder
wrapper div~div nehmen

dann kommt div+p auch jeweils zur Anwendung.
Das ist richtig, aber alle deine 3 Selektoren werden dann auch gleichzeitig auf die DIVs angewendet, in denen "nix" steht, d.h., die Regel
pre ~ div { ... }
wird überschrieben, was nicht sein soll.

Du hast mich aber mit
Zitat:
Du hast eine Klasse .box [...],
dennoch auf die richtige Spur gebracht, danke!

Zitat:
Du hast eine Klasse .box die deine Border-Eigenschaft überschreibt, bzw. zur Anwendung kommt, obwohl die Regel vor der Regel div + p kommt.
Ich habs jetzt:

.box {...} hat die Spezifität 0, 0, 1, 0 und
p + div {...} hat die Spezifität 0, 0, 0, 2

Somit überschreibt .box den Selektor p + div, wie du schon sagtest.
Da ist dann auch die Reihenfolge egal, weil .box eine höhere Spezifität hat.

Eine Lösung des Problems sehe ich allerdings nur darin, daß jetzt doch jedes dem Absatz nachfolgende DIV einen Klassennamen bekommen muss.


Grüße
Gaby
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
input type submit formatieren dieter99 CSS 9 10.10.2008 17:39
Conflict between Mime Type and Document Type: Probleme im Internet Explorer Jipii (X)HTML 4 22.01.2008 20:49
Liste im IE StarSt0rm CSS 3 22.08.2007 21:04
Formulare und Mime Type elevance (X)HTML 9 05.06.2007 15:39
Document type does not allow element Vanquish CSS 8 17.08.2005 11:14


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