To jak – znasz odpowiedź? Która wersja jest poprawna: :before, czy ::before? Może obie…?
Bez zbędnych ceregieli przejdźmy do konkretów.
Poprawna wersja to ::before. Przynajmniej tak mówi specyfikacja:
A pseudo-class always consists of a „colon” (
:) followed by the name of the pseudo-class and optionally by a value between parentheses.
I nieco niżej…
A pseudo-element is made of two colons (
::) followed by the name of the pseudo-element.
Czyli sprawa wydaje się oczywista:
::podwójny dwukropek dla pseudo-elementów:pojedynczy dwukropek dla pseudo-klas.
Nie pamiętasz, co jest czym…?
- Pseudo-elementy to np.:
::before,::after,::first-letter,::placeholder. Pełną listę znajdziesz tutaj. - Pseudo-klasy to np.
:hover,:focus,:active,:not(),:nth-child(). Pełną listę znajdziesz tutaj.
I w tym momencie można by skończyć naszą dyskusję, jednakże, jak to we frontendzie bywa…. hola, hola, nie tak szybko.
Powiesz pewnie – ja piszę :before i u mnie działa.
Racja.
Wróćmy zatem jeszcze raz do specyfikacji:
This
::notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely,:first-line,:first-letter,:beforeand:after).
Okazuje się, że cywilizowane przeglądarki muszą wspierać obie składnie. W przeciwnym wypadku połowa internetu by wybuchła. Jednakże nasza specyfikacja wyraźnie zaznacza….
This compatibility is not allowed for the new pseudo-elements introduced in this specification.
Oznacza to, że każdy nowy pseudo-element będzie wymagał użycia podwójnego dwukropka. I tu nie ma wymówek. Dotyczy to np. ::selection przedstawionego w tej specyfikacji (tak, wiem, że to dopiero WD, jednak ::selection ma już piękne wsparcie i z powodzeniem możemy z niego korzystać już dziś). Podobnie sprawa wygląda z pseudo-elementem ::placeholder.
Wobec tego zachęcam Ciebie do poprawnej pisowni. Dosyć mamy słabego kodu w internecie, nie przykładaj do niego swojej ręki. Jeśli tylko nie musisz wspierać IE8 – pisz zgodnie ze specyfikacją. Moja córka powiedziałaby: bądź jak trzecia świnka, buduj domek z drewna, a nie siana.
