CSS :before Selektor

Thonixx

Hallo Leute

An die CSS-Fortgeschrittenen:

Ich habe derzeit den Selektor (so glaub ich heisst das ja korrekt) :before auf dem a-Tag angewendet.

So:

HTML

a:before { content: 'test'; }

Nun möchte ich aber hinzufügen, dass ich dieses a:before nur dann anwenden möchte, wenn es ein Textlink ist.
Mein Problem ist, dass das natürlich auch bei einem verlinkten Bild kommt und das sieht sch***** aus.

Ich habe an sowas gedacht, dass ich irgendwie > verwende.
Ich müsste CSS ja bloss sagen, dass ich, wenn im A-Tag ein img-Tag vorhanden ist, kein content kommt.
Nur wie müsste ich das schreiben?

Hab schon gegoogelt, gesucht und so weiter, aber nichts gefunden, was genau zutrifft.

Danke für eure Hilfe.

MFG ffx5

synaptic

ei vergib dem link ne klasse...

HTML

<a href="#" class="textlink">blubb</a>

und beim css:

Code

a.textlink:before { content: 'test'; }

Thonixx

Ich hab so meine Gründe, warum ich das anders machen möchte.
Es soll für ein CMS Design sein und der User hat keine Ahnung von Klassen und ID's.

Ich weiss, es gibt ne Lösung, hatte das schon mal gesehen.
Aber leider finde ich die gottverd***** Seite im Web nicht mehr.

synaptic

kann dir da net folgen...

Kämpfer

Bist du dir sicher dass du da schon mal was anderes gesehen hast, es gibt nämlich eigentlich nichts derartiges in Css.

Thonixx

Bin mir eigentlich schon sicher.

Es gibt ja solche Zeichen: >, +,
[*], und so weiter.

Kann man nicht irgenwas, wie: a:before > img oder sowas?

koslowski

Hi,

also ich hab das ohne Probleme hingekriegt.

In einem container hab ich ne verlinkte h3-Überschrift und in der Zeile darunter ein verlinktes Bild:

HTML

<h3><a href="http://beispiel.de/">Textlink</a></h3>
<p><a href="beispiel.de/"><img src="grafik.png" width="300" height="225" /></a></p>

Formatiert hab ich dann so:

HTML

h3 a:before  {
    content:"Ein Text davor ";
    font-style:italic;
    color:red;
}

Das betrifft alle a's die nach einer h3 kommen.

Wenn du lauter p's hast, dann wickel den Link noch in ein span z.B.

HTML

[code=html]
<p><span><a href="http://beispiel.de/">Textlink</a></span></p>
<p><a href="beispiel.de/"><img src="grafik.png" width="300" height="225" /></a></p>

[/code]

Dann müßtest du so formatieren:

HTML

p span a:before  {
    content:"Ein Text davor ";
    font-style:italic;
    color:red;
}

thilda

Die erweiterten selectoren aus CSS3 könnten dir da weiterhelfen. Allerdings sind die noch nicht überall möglich.

Tags