Jump to content
skaterdav85

CSS pseudo-classes vs pseudo-elements

Recommended Posts

My understanding is that pseudo classes are different states/forms/classes of existing elements. While psuedo elements are generated or "imaginary" elements. These are considered psuedo classes::active:hover:visited These are different states of a particular element. For example, :hover represents an element which has the cursor placed over it. These would be psuedo elements::before:after:first-child:last-child These "elements" are not real elements, but act as though they are. In the case of :before and :after, these "elements" are generated by the browser and appear before or after the element in the selector. :first-child, :last-child, and similar selectors are not generated, but refer to elements, specified in the selector, which match a certain condition. For example, li:first-child selects the first li in a list. If that's about as clear as mud, let me know and I'll try to explain it a little better. :P

Share this post


Link to post
Share on other sites

In addition to ShadowMage's observations, the phrase 'These "elements" are not real elements, but act as though they are.' deserves some additional explanation...A pseudo class is like a normal class that is automatically applied on certain conditions. For example, :hover can be emulated by adding a class onmouseover and associating a style with said class.A pseudo element is like a special element that is automatically generated on certain conditions. This means that a pseudo element can have its own independent set of styles, whereas a pseudo class "cascades" with the styles that were present before its introduction. You can observe this by applying margins and paddings on elements with ::before and :hover. With :hover, the margin/padding will be overriden, and with ::before, it should be added onto the original element's margin/padding (in browsers that pass ACID2 at least...).

Share this post


Link to post
Share on other sites
In addition to ShadowMage's observations, the phrase 'These "elements" are not real elements, but act as though they are.' deserves some additional explanation...
Agreed. Thx for backing me up. ^_^
This means that a pseudo element can have its own independent set of styles, whereas a pseudo class "cascades" with the styles that were present before its introduction.
You can observe this by applying margins and paddings on elements with ::before and :hover. With :hover, the margin/padding will be overriden, and with ::before, it should be added onto the original element's margin/padding (in browsers that pass ACID2 at least...).
These two statements seem to contradict each other, though. If an element has it's own independant styles, to me that means it's styles are not inherited or taken from any other elements, while an element whose styles "cascade" will inherit styles from other elements. Yet you say that pseudo elements (independant style) inherit or cascade its styles and the pseudo class (cascading style) overrides other styles. :umnik2: Or am I reading that wrong? Edited by ShadowMage

Share this post


Link to post
Share on other sites
Yet you say that pseudo elements (independant style) inherit or cascade its styles and the pseudo class (cascading style) overrides other styles. :umnik2: Or am I reading that wrong?
I said added, as in "appear as an addition to". In reality, you have a separate margin being applied over a separate (pseudo) element, but in the absence of distinct colors, borders or anything like that, it will appear as if it was added to the margin of the real element. I probably should've clarified I'm talking about the left margin, since ::before applies to the left side, not around the element.You've prompted me to do some tests non the less... and it seems your wrong interpretation of what I said is actually sort of the real deal... observe:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">    <head>        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />        <title>TEST</title>        <style type="text/css">            div {                color:pink;/*Applies throughtout pseudo classes and pseudo elements alike*/                padding:30px;/*Not applied to the pseudo element, applies in the pseudo class, but is overiden there.*/                outline:10px solid violet;            }            div::before {                content: '';/*Browsers refuse to have a ::before pseudo element without this*/                display:inline-block;                background:red;                padding:50px;/*                    30(real left padding)+50(left pseudo padding)+50(right pseudo padding)=130px                    of left padding before the content (not including the pixels of any ::before content glyphs).                */                outline:10px solid blue;            }            div:hover {                background:green;                padding:70px;                outline:10px solid orange;            }            div:hover::before {                background:aqua;                padding:110px;/*                    70px(real left padding on :hover)+110px(left pseudo padding on :hover)+110px(right pseudo padding on :hover)=290px                    of left padding before the content (not including the pixels of any ::before content glyphs).                */            }            /*Surprisingly, the following doesn't work in any browser I've tested.            It seems at least this pseudo element is not element enough to have its own states too.*/            div::before:hover {                background:yellow;            }        </style>    </head>    <body>        <div>TEST</div>    </body></html>

If you play around with this in Firebug while you enable and disable the different paddings and stuff, you'll see in action the difference between pseudo classes and pseudo elements (the padding values are specifically chosen to make the look of every such combo unique).

Share this post


Link to post
Share on other sites
I said added, as in "appear as an addition to". In reality, you have a separate margin being applied over a separate (pseudo) element, but in the absence of distinct colors, borders or anything like that, it will appear as if it was added to the margin of the real element. I probably should've clarified I'm talking about the left margin, since ::before applies to the left side, not around the element.
Ok, that makes a little more sense. I see what you mean now.
/*Surprisingly, the following doesn't work in any browser I've tested.It seems at least this pseudo element is not element enough to have its own states too.*/div::before:hover {
I already knew this didn't work, as I've tried to do it in the past. ^_^

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...