Sasha (Select All)

Per CSS3 ::selection-Pseudoelement-Selektor:

p::selection {
  color: #fff;
  background: #fff;
  text-shadow: #000 0px 0px 4px;
}
p::-moz-selection {
  color: #fff;
  background: #fff;
}

Pseudoelement-Selektoren beginnen in CSS3 mit zwei Doppelpunkten um sie leichter von Pseudoklassen-Selektoren unterscheiden zu können.

Pseudoklassen sind Eigenschaften, die sich nicht direkt aus dem HTML ergeben. Elemente, die den gleichen Namen, Inhalt und die gleichen Attribute enthalten, können trotzdem unterschiedliche Pseudoklassen haben, wie z.B. :hover und :first-child.
Pseudoelemente sind Elemente, die so nicht einzeln und auswählbar im HTML stehen, wie ::selection, ::first-letter, ::before und ::after.

Firefox/Gecko und Opera verstehen bei ::selection nur background und color, während WebKit auch noch text-shadow, -webkit-text-stroke und -webkit-text-fill-color unterstützt.

MobileSafari ignoriert ::selection allerdings komplett.

Tags: css, nsfw
3 Kommentare

Anonymous
Hmmm, irgendwie versteh ich den Unterschied zwischen Pseudoelementen und Pseudoklassen immernoch nicht. Da seh ich nämlich keine Gemeinsamkeiten zwischen :hover und :first-child bzw. ::selection, ::first-letter, ::before und ::after. :/
Robert Gerlach
Der Unterschied ist eigentlich auch irrelevant, solange man weiß, was die Selektoren auswählen.

Aber du kannst es dir so besser veranschaulichen: Alles, was man auch mit normalen Klassen machen könnte, ist eine Pseudoklasse:

<ul>
    <li class="first-child">
        <span lang="de" class="lang_de">bla</span>
    </li>
    <li>
        <a class="visited" href="#" rel="nofollow">bleh</a>
    </li>
</ul>

Vorrausgesetzt, die Klassen können sich dynamisch verändern, wenn man z.B. mit der Maus drüberhovert oder einen Link anklickt. Da hinkt der Vergleich dann etwas.

Pseudoelemente hingegen könnte man nur mit extra HTML simulieren, extra Klassen allein reichen nicht aus. ::first-letter z.B. mit

<p><span class="first-letter">B</span>la</p>

oder ::after mit

<p>Bla laber schwafel sülz
    <div class="after"> alles was danach kommt..... </div>
</p>

Eine ::selection wäre dann der (dynamisch generierte) Teil eines Elements, der gerade markiert wurde:

<span>I am <span class="selection">the goddamn</span> Batman!</span>

So könnte man das halbwegs genau erklären. Aber wie gesagt, ist eigentlich auch Wurst, solange man weiß, welcher Selektor was macht.
Anonymous
Dankeschön!
Das macht für mich jetzt Sinn! :D
ಠ_ಠLeere Kommentare sind albern