skaterdav85 Posted February 14, 2012 Share Posted February 14, 2012 Does anyone know the difference between a pseudo class and a pseudo element? Or do they just refer to the same thing? Link to comment Share on other sites More sharing options...
ShadowMage Posted February 14, 2012 Share Posted February 14, 2012 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. Link to comment Share on other sites More sharing options...
boen_robot Posted February 15, 2012 Share Posted February 15, 2012 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...). Link to comment Share on other sites More sharing options...
ShadowMage Posted February 15, 2012 Share Posted February 15, 2012 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. Or am I reading that wrong? Link to comment Share on other sites More sharing options...
boen_robot Posted February 15, 2012 Share Posted February 15, 2012 Yet you say that pseudo elements (independant style) inherit or cascade its styles and the pseudo class (cascading style) overrides other styles. 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). Link to comment Share on other sites More sharing options...
ShadowMage Posted February 15, 2012 Share Posted February 15, 2012 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.