I'm dissecting this very beautiful example of how CSS can help you create nice glow effects on images.
http://jsfiddle.net/necolas/KbNq7/
This particular line from the example mentions:
Although this method will only produce the full effect in Firefox 4,
other browsers will eventually catch up and apply transitions to
pseudo-elements.
What is a pseudo-element?
Pseudo-elements are CSS selectors that manipulate parts of an element in a special way.
They include:
:first-line
:before
:after
Application
Pseudo elements are applied like so
p:first-letter{
color:black;
font-style:italic;
}
Note: the : followed by the selector is how pseudo elements are denoted in CSS1 and CSS2. In CSS3, the double colon is used (::) to distinguish them from pseudo-classes.
More details here: http://reference.sitepoint.com/css/pseudoelements
Support
Support is decent for a number of browsers, with older versions of IE notably poor with support. QuirksMode has a compatibility table (a bit out-of-date but still useful): http://www.quirksmode.org/css/contents.html#t15
Cool Tricks
Pseudo elements can do some cool things, including
show the URLs of links in printed docs
fake a float:center;
See more here: http://css-tricks.com/9516-pseudo-element-roundup/
With jQuery
jQuery has a number of unique selectors that enhance and expand on the native CSS group:
http://api.jquery.com/category/selectors/
Note: you can use jQuery to force older browsers to adopt certain rules. For example, IE6 will ignore :last-child. Using jQuery can force IE6 to apply that style.
The Spec
http://www.w3.org/TR/CSS2/selector.html#pseudo-element-selectors
Its not an element in the dom. Its something you can select with a selector, notably after a :.
http://www.htmldog.com/guides/cssadvanced/pseudoelements/
Related
Is there any functional difference between the CSS 2.1 :after and the CSS 3 ::after pseudo-selectors (other than ::after not being supported in older browsers)? Is there any practical reason to use the newer specification?
It's pseudo-class vs pseudo-element distinction.
Except for ::first-line, ::first-letter, ::before and ::after (which have been around a little while and can be used with single colons if you require IE8 support), pseudo-elements require double colons.
Pseudo-classes select actual elements themselves, you can use :first-child or :nth-of-type(n) for selecting the first or specific <p>'s in a div, for example.
(And also states of actual elements like :hover and :focus.)
Pseudo-elements target a sub-part of an element like ::first-line or ::first-letter, things that aren't elements in their own right.
Actually, better description here: http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
Also here: http://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/
CSS Selectors like ::after are some virtual elements not available as a explicit element in DOM tree. They are called "Pseudo-Elements" and are used to insert some content before/after an element (eg: ::before, ::after) or, select some part of an element (eg: ::first-letter). Currently there is only 5 standard pseudo elements: after, before, first-letter, first-line, selection.
On the other hand, there are other types of selectors called "Pseudo-Classes" which are used to define a special state of an element (like as :hover, :focus, :nth-child(n)). These will select whole of an existing element in DOM. Pseudo classes are a long list with more than 30 items.
Initially (in CSS2 and CSS1), The single-colon syntax was used for both pseudo-classes and pseudo-elements. But, in CSS3 the :: syntax replaced the : notation for pseudo-elements to better distinguish of them.
For backward compatibility, the old single-colon syntax is acceptable for pseudo-elements like as :after (browsers still all support the old syntax with one semicolon). Only IE-8 doesn’t support the new syntax (use single-colon if you want to support IE8).
Background: I am trying to fix two annoyances in the appearance of the audio element in Chrome and while attempting to do so I came across two issues I would like to understand better. This is about Chrome 89 on MacOS. I nicely manage to style inside the audio element, using pseudo selectors. Finding out about the names of the pseudo selectors works nicely when looking inside of the shadow dom with the dom inspector. For example, the following two rules work exactly as expected:
::-webkit-media-controls-timeline {background-color:pink;}
audio::-webkit-media-controls-time-remaining-display {background-color:lightgrey;}
Question: However, two things do not work as expected and I want to understand why.
Problem 1: Styling the first letter in the remaining-display div does not work. The following rule is not effective.
audio::-webkit-media-controls-time-remaining-display:first-letter {color:white;}
This is astonishing, since the browser dispplays this
<style>div:first-letter {color:red;}</style> ... <div>e xample</div>
as expected. Why would I be unable to style the first letter? (The idea of this is to get rid of the most annoying leading / symbol in the remaining time display).
Problem 2:
Why would I be unable to style an element with a different pseudo attribute in a different part of the shadow DOM. More precisely the following rule is not effective:
::-internal-track-segment-highlight-before {background-color: blue;}
I see no difference to the other case above where the color styling worked. (The idea of this is to increase the too small contrast between two parts of the track segment.)
Add on: I managed to improved the contrast a bit using
audio::-webkit-media-controls-timeline {-webkit-filter: brightness(2.5);}
but the issue remains why the one method worked and the other did not work.
You are using Chrome, with "Show user agent shadow DOM" turned on
There are 2 types of shadowDOM
let's call it "userland" shadowDOM,
the (open or closed) shadowDOM created by a (3rd party developer) Custom Element/Web Component
This type is available since the W3C Web Components standard was implemented
"user-agent" shadowDOM created by each Browser (Vendor),
implementing input , audio , video, select etc. tags
but each Browser can have a different implementation.
This shadowDOM content can only be accessed if the Browser vendor has enabled access. (with shadowParts or related tech)
And in general it can not be accessed.
WebKit does have some pseudo selectors to change some settings
See: Is it possible to style html5 audio tag?
But they are not CSS selectors that get you full access to shadowDOM by creating complex selectors.
Some Font and Styling settings do cascade into shadowDOM only to have a consistent style in the whole page.
See: https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/
So that is why your color:red works, and :first-letter doesn't
That is why filter works; and background-color doesn't
alternative
https://github.com/dascritch/cpu-audio is a decent Web Component replacing the standard <audio> tag, that gets you styling in all browsers
Note the notation: (open) not (user-agent)
video::-webkit-media-controls-timeline {
background-color: blue !important;
}
work better for highter contrast.
(tested in video tag)
I've found that using a single colon with the pseudo tag first-line works fine. Why is a double colon used for this tag and is it really needed?
From WC3 Schools:
p::first-line
{
color:#ff0000;
font-variant:small-caps;
}
But this works fine:
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
http://www.w3schools.com/css/css_pseudo_elements.asp
As MDN states:
In CSS 2, pseudo-elements were prefixed with a single colon character.
As pseudo-classes were also following the same convention, they were
indistinguishable. To solve this, CSS 2.1 changed the convention for
pseudo-elements. Now a pseudo-element is prefixed with two colon
characters, and a pseudo-class is still prefixed with a single colon.
As several browsers already implemented the CSS 2 version in a release
version, all browsers supporting the two-colon syntax also support the
old one-colon syntax.
If legacy browsers must be supported, :first-line is the only viable
choice; if not, ::first-line is preferred.
Further, as the W3 states:
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, :before and
:after). This compatibility is not allowed for the new pseudo-elements
introduced in this specification.
MDN for ::first-line (:first-line)
CSS3 introduced the ::before notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :before, introduced in CSS2.
The situation on ::before and ::after are pretty much the same.
CSS3 introduced the ::before notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :before, introduced in CSS2.
MDN for ::before (:before)
MDN for ::after (:after)
You might ask:
What's the difference between Pseudo-classes and Pseudo-elements?
Answer from MDN
Answer from Stackoverflow
This question already has answers here:
What does the double colon (::) mean in CSS?
(3 answers)
Closed 8 years ago.
I have seen CSS like Custom Scrollbars in WebKit
body::-webkit-scrollbar {
width: 10px;
height: 13px;
background-color: white;
color: #EBEBEB;
border:none;
}
This specifies CSS for WebKit browsers. But what does this operator (::) mean in CSS?
Where can I find other such operators in CSS?
It indicates that what follows is a "pseudo-element". From the CSS Selectors level 3 spec:
A pseudo-element is made of two colons (::) followed by the name of
the pseudo-element.
And a pseudo-element creates an "abstraction about the document tree":
Pseudo-elements create abstractions about the document tree beyond
those specified by the document language. For instance, document
languages do not offer mechanisms to access the first letter or first
line of an element's content. Pseudo-elements allow authors to refer
to this otherwise inaccessible information. Pseudo-elements may also
provide authors a way to refer to content that does not exist in the
source document (e.g., the ::before and ::after pseudo-elements give
access to generated content).
For example, the ::webkit-scrollbar pseudo-element provides a mechanism to refer to the webkit scrollbar, which would be otherwise inaccessible. Another example: the ::first-letter pseudo-element provides a way to refer to the first letter of an element (if it is not preceded by any other content).
In css3 we use double colon(::) for pseudo-element & single colon(:) for pseudo-class
The single colon syntax (e.g. “:before” or “:first-child”) is the
syntax used for both pseudo-classes and pseudo-selectors in all
versions of CSS prior to CSS3. With the introduction of CSS3, in order
to make a differentiation between pseudo-classes and pseudo-elements
(yes, they’re different), in CSS3 all pseudo-elements must use the
double-colon syntax, and all pseudo-classes must use the single-colon
syntax.
Read this article http://www.impressivewebs.com/before-after-css3/
It is used to define a pseudo-element. As an example from the documentation:
p::first-line { text-transform: uppercase }
This modifies the first line of p elements. There's no real DOM element that is selected, that is why it is a pseudo-element.
In your case, it modifies scrollbars in WebKit within the body element:
body::-webkit-scrollbar
There is no scrollbar element within your document but this still allows you to style scrollbars within your HTML page.
this operator is new add in CSS3.it's meaning Pseudo element.
Thought I'd add this since people are having difficulty understanding what it actually means:
Basically it's a way to get a document to format in a way that wouldn't be possible using the markup that is present. A good example exists in the W3 spec:
Here is the example for a ::first-letter pseudo element
The original HTML fragment
<div>
<p>The first text.
The fictional markup after the pseudo element is applied
<div>
<p><div::first-letter><p::first-letter>T</...></...>he first text.
As you can see - the original HTML specified a div and a p, but there is no way to format the first letter using standard CSS, so the pseudo elements were added, enabling the first letter to be modified
Psuedo elements allow you to do stuff like that..
Google is your friend here.
Pseudo-elements
Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).
A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.
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, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.
Found at http://www.w3.org/TR/css3-selectors
If I use a class for a normal div, can I write the css like:
.messagebc:hover {
...
}
Is it legal?
It's ineffiecient to use :hover on non-link elements.
Avoid the :hover pseudo-selector for non-link elements for IE clients.
If you use :hover on non-anchor
elements, test the page in IE7 and IE8
to be sure your page is usable. If
you find that :hover is causing
performance issues, consider
conditionally using a JavaScript
onmouseover event handler for IE
clients.
:hover pseudo-selector to non-link elements is a very ineffiecient selector (e.g):
For example:
h3:hover {...}
.foo:hover {...}
#foo:hover {...}
div.faa :hover {...}
The :hover pseudo-selector on non-anchor elements is known to make IE7 and IE8 slow in some cases*. When a strict doctype is not used, IE7 and IE8 will ignore :hover on any element other than anchors. When a strict doctype is used, :hover on non-anchors may cause performance degradation.
More info on un-effiecient selectors
why havn't you simply tried it? yes, you can (in all modern browsers, the IE6 knows :hover only on a, if i remember right).
Yes you can use :hover for all elements in modern browsers (IE7+).
While IE6 support :hover only for <a> elements, you should write you html and css so, that you won't need to use js-patches (for example, in list-menus just use <li>Link</li>, not <a><li><a> and assign :hover to the link element. This should do the trick.)
Yes, however in IE6 you can set :hover only on ANCHOR elements.
Only ie6 does not support it on elements other than <a>, but that can be fixed with a simple javascript: ie7.js
The share of the ie6 is 5.55% and is
decreasing everyday
So You may use it
Wikipedia ie6
Every current browser will support it. If you need it to work in an older browser such as IE6 then take a look at #Willem's link.
If by the term class you mean HTML element then yes per W3C spec you can use the :hover selector on all elements. Whether you should or not is a different question.
Sources:
http://www.w3schools.com/cssref/sel_hover.asp
http://www.w3.org/2009/cheatsheet/#search,%3Ahover