Menu
I'm researching css and typography, and ran into this intriguing concept of pseudo-selectors. I have used single colon psuedo selectors and am unfamiliar with the double colon version of the psuedo selectors. I understand that double colon is called a pseudo-element instead of a pseudo-selector - but why? And what is the difference?
I also understand that single colon is much more supported, so in what situation would one use the double colon pseudo-element? Are there use cases where double colon would be necessary, and single colon would not get the job done? what might that situation be?
"Unlike pseudo-elements, pseudo-classes can appear anywhere in selector chain." (quote from link) - I don't know what 'selector chain' is, but this also seems like yet another limitation of the double colon approach. Why would I need to use double colon if it is (in my understanding) just a less supported version of single colon?
edit: they appear not to be functionally the same: fiddle
<div><p>First Line</p></div> <div><p>Second Line</p></div> css
div:nth-child(1) > p { color: green; } div::nth-child(2) > p { color: blue; } 
521
Basically a pseudo-class is a selector that assists in the selection of something that cannot be expressed by a simple selector, for example :hover . A pseudo-element however allows us to create items that do not normally exist in the document tree, for example ``::after`.
Special welcome offer: get $100 of free credit. CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.
Pseudo-elements ( :: ) allow you to style different parts of an element e.g. the first line, the first letter, inserting content before or after, etc. Originally they all used a single colon, but CSS3 introduced the double colon to separate the two. Follow this answer to receive notifications.
Pseudo-classes are CSS classes used to define the state of an element. They target elements that can't be targeted with combinators or simple selectors like id or class. They are used to select elements based on their attributes, states, and relative position.
Pseudo-Classes Pseudo-classes are identified with a single colon according to the CSS3 specification. A pseudo-class is a selector that selects elements that are in a specific state. For instance, the specific state may be an HTML element that is clicked/hovered or an element that is the first child of its parent.
These are the pseudo elements or pseudo selectors that most CSS developers are familiar with. A CSS pseudo class is a pseudo selector that targets elements that match a certain criteria or state. And we'll talk about a few examples in just a moment. But a CSS pseudo class is signified by a single colon, followed by the name of the pseudo class.
Pseudo-elements behave in a similar way. However, they act as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements. Pseudo-elements start with a double colon ::.
A CSS pseudo-element is used to style specified parts of an element. The ::first-line pseudo-element is used to add a special style to the first line of a text. Note: The ::first-line pseudo-element can only be applied to block-level elements.
Pseudo-classes (:) allow you to style the different states of an element e.g. when you hover over it, when it is disabled, when it is the first child of its parent, etc.
Pseudo-elements (::) allow you to style different parts of an element e.g. the first line, the first letter, inserting content before or after, etc.
Originally they all used a single colon, but CSS3 introduced the double colon to separate the two.
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
