first-letter rückgängig machen

[Micha]

Hallo,

ich habe auf meiner Seite mittels first-letter den ersten Buchstaben (das erste Zeichen) in einem Absatz formatiert. Nun möchte ich aber, wenn dieser Absatz (Quell)code enthält, dass diese Formatierung nicht greift.
<p><code>window.alert("Hallo Welt!");</code></p>

Wie macht man Pseudoelemte rückgängig? Meine gescheiteren Versuche:

  
/* Formatiert erstes Zeichen im Absatz */  
div#content p:first-letter {  
}  
  
/* mein erster Versuch */  
div#content p:first-letter code {  
}  
  
/* mein zweiter Versuch */  
div#content p code:first-letter {  
}

so einfach gings nicht, nur wie gehts?

Mit freundlichem Gruß
Micha

[Matze]

Hallo,

wie wär es wenn du first-letter wieder vergisst und für p eine Klasse mit text-indent:-1em; schreibst.
Wenn du dann nichts einrücken willst lässt du die Klassenangabe im p-Tag einfach weg.

Grüße, Matze

[Micha]

Hallo Matze,

Wenn du dann nichts einrücken willst lässt du die Klassenangabe im p-Tag einfach weg.

Es geht ja nicht nur ums einrücken; Schriftart, -farbe und -größe sind auch verschieden.

Eine Klasse ist sicher eine Möglichkeit nur, würde ich diese maxiaml für die Ausnahme nutzen wollen und nicht für den generellen Zustand. Soll heißen, ich möchte schon, dass das erste Zeichen entsprechend formatiert wird und dies stellt auch 99% der Fälle dar. Da es also die Regel ist, sollte die CSS-Klasse die Ausnahme beschreiben und nicht umgedreht.

Das einfügen eines "Platzhalte-SPANs", wie Detlef es  vorschlägt, ist natürlich auch nicht unbedingt das, was ich machen möchte. Der Lösungsvorschlag mit einem anderen (Block)element hatte ich auch schon in Erwägung gezogen; hoffte aber noch, das es eine elegantere Lösung gibt.

Nichtsdestotrotz, vielen Dank!

Mit freundlichem Gruß
Micha

[Detlef G.]

Hallo Micha

Eine Klasse ist sicher eine Möglichkeit nur, würde ich diese maxiaml für die Ausnahme nutzen wollen und nicht für den generellen Zustand. Soll heißen, ich möchte schon, dass das erste Zeichen entsprechend formatiert wird und dies stellt auch 99% der Fälle dar. Da es also die Regel ist, sollte die CSS-Klasse die Ausnahme beschreiben und nicht umgedreht.

Sorry, für die komplizierten Varianten.
Wenn du eine Klasse für die betreffenden Absätze verwendest, dann kannst du die Formatierungen direkt zurücknehmen.

div#content p.code:first-letter {  
}  

IE (zumindest 6) ignoriert :first-letter bei Klassen, du kannst ihn aber trotzdem überreden.

div#content p code, div#content p.code:first-letter {  
}  

Interessanterweise ist dann auch kein !important nötig.

Auf Wiederlesen
Detlef

[Micha]

Hallo Detlef G.,

div#content p code, div#content p.code:first-letter {

}

  
Perfekt. Habe mal eine Zeile entsprechend [formatiert](http://derletztekick.com/software/Calendar__JS).  
  
Danke Euch beiden!  
  
  
Mit freundlichem Gruß  
Micha

-- 
[LeagueEditor JavaScript](http://leagueeditor.derletztekick.com) || [Spannung](http://derletztekick.com/), [Spaß](http://derletztekick.com/service/MineSweeper) und [S...](http://derletztekick.com/software)  
  

[Detlef G.]

Hallo Micha

ich habe auf meiner Seite mittels first-letter den ersten Buchstaben (das erste Zeichen) in einem Absatz formatiert. Nun möchte ich aber, wenn dieser Absatz (Quell)code enthält, dass diese Formatierung nicht greift.
<p><code>window.alert("Hallo Welt!");</code></p>

Wie macht man Pseudoelemte rückgängig? Meine gescheiteren Versuche:

/* Formatiert erstes Zeichen im Absatz */
div#content p:first-letter {
}

>   
  
~~~css
div#content p code {  
 /* alle gesetzten Eigenschaften mit !important wieder auf die gewünschten Werte zurücksetzen */  
 eigenschaft:wert !important;  
}

Das funktioniert allerdings wohl nur im IE.

Da bleibt dir nur übrig, dafür zu sorgen, dass das erste Zeichen eines Absatzes kein code ist.

Entweder du lässt den Absatz um den code-Teil weg oder verwendest (nur wenn nötig) dafür ein anderes Blockelement.

Anstatt

…</p>  
<p><code>window.alert("Hallo Welt!");</code></p>

könntest du schreiben

…  
<code>window.alert("Hallo Welt!");</code></p>

mit

div#content p code {  
 display:block;  
}

Oder

…</p>  
<div><code>window.alert("Hallo Welt!");</code></div>

Eine andere Möglichkeit bestände darin, dafür zu sorgen, dass das erste Zeichen des code-Elements nicht angezeigt wird.
<p><code><span>&nbsp;</span>window.alert("Hallo Welt!");</code></p>

CSS dazu:

div#content p code {  
 /* für IE alle gesetzten Eigenschaften mit !important wieder auf die gewünschten Werte zurücksetzen */  
 eigenschaft:wert !important;}  
div#content p code span {  
 /* für alle Browser dafür sorgen, dass das Leerzeichen keinen Platz beansprucht */  
 font-size:0;  
}  

Ob dies in allen Browsern funktioniert, habe ich allerdings nicht getestet.

Auf Wiederlesen
Detlef

[Micha]

Hallo Detlef G.,

vielen Dank für Deine Vorschläge!

Das funktioniert allerdings wohl nur im IE.

Schade, das sah noch mit am besten aus, weil ich nur in der CSS etwas ändern müsste.

Entweder du lässt den Absatz um den code-Teil weg oder verwendest (nur wenn nötig) dafür ein anderes Blockelement.

Darauf wird es wohl nun hinauslaufen. Ein zusätzliches (leeres) span finde ich nicht so besonders.

Mit freundlichem Gruß
Micha