First-Letter funktioniert nicht wie gewollt

[paraphan]

Hallo,

ich möchte den ersten Buchstaben auf meinem Blog größer machen. Soweit hab ich das auch gut hinbekommen, allerdings wird jetzt bei jedem Absatz der Buchstaben groß gemacht.

So mach ich den ersten Buchstaben groß, was super funktioniert:

div.entry-content p:first-letter { padding-right: 7px; 
        padding-left: 5px; 
        font-size: 70pt; 
        left: 0px; 
        float: left; 
        padding-bottom: 0px; 
        padding-top: 5px; 
        position: absolute; 
        top: 100px;
        }

Bei der Bildunterschrift möchte ich den ersten Buchstaben normal klein haben, allerdings kann ich zwar die Farbe ändern, aber die Größe bleibt gleich:

.wp-caption-text:first-letter{
font-size:0.5em;
color:red;
}

Hier eine Vorschau auf die Seite.

Wie lös ich das jetzt am besten?

 

[ComFreek]

Hallo,

ich möchte den ersten Buchstaben auf meinem Blog größer machen. Soweit hab ich das auch gut hinbekommen, allerdings wird jetzt bei jedem Absatz der Buchstaben groß gemacht.

Vielleicht hilft dir die Pseudoklassae first-child, siehe hier: SelfHTML

 

[paraphan]

Nein, hilft mir leider nicht.

 

[hela]

... Bei der Bildunterschrift möchte ich den ersten Buchstaben normal klein haben, allerdings kann ich zwar die Farbe ändern, aber die Größe bleibt gleich:
...

Hallo, wenn du mit der zweiten Regel Eigenschaften der ersten überschreiben willst, dann muss die zweite Regel mindestens die gleiche Spezifität haben. Also müsste die zweite Regel (mindestens) so formuliert werden, wenn sie sich mit der entsprechenden Eigenschaft durchsetzen soll:

div.entry-content p.wp-caption-text:first-letter{
  font-size:0.5em;
  color:red;
}

EDIT:
Habe gerade gesehen, dass die Bildunterschriften keine Kinder sondern nur Nachfahren des "div.entry-content"-Elements sind. Dann kannst du die erste Regel auch so formulieren:

div.entry-content > p:first-letter {
	padding-right: 7px; 
	padding-left: 5px; 
	font-size: 70pt; 
	left: 0; 
	float: left; 
	padding-bottom: 0; 
	padding-top: 5px; 
	position: absolute; 
	top: 100px;
}

Somit wirken diese Eigenschaften nur noch auf das Kindelement.

 

[paraphan]

Funktioniert perfekt, vielenvielen Dank!

Kannst du mir vielleicht sagen wie diese Css-Funktion mit dem ">" heisst damit ich mir das mal genauer ansehen kann?

 

[SpiceLab]

Diese Syntax gehört zu den Kind-Selektoren.

 

[hela]

Diese Syntax gehört zu den Kind-Selektoren.

Genau.

Auf den Demoseiten zu ie7.js bei Google gibt es ein einprägsames Beispiel, was ein Kindselektor ist und was nicht.

 

[ComFreek]

@paraphan: Ich habe dir eine PN geschickt

 

[paraphan]

Danke noch für die Hinweise euch allen