HOME | DD
Celvas ā Pseudo-classes/elements : vs ::
#css #element #pseudo #infotorial #coding #deviantartrelated
Published: 2015-07-03 22:33:24 +0000 UTC; Views: 2267; Favourites: 15; Downloads: 0
Redirect to original
Description
/* ---- Goners / Importants ---- */ body div#devskin10621483 .gr { padding:0!important; } body div#devskin10621483 .gr-top img, body div#devskin10621483 .gr1, body div#devskin10621483 .gr2, body div#devskin10621483 .gr3, body div#devskin10621483 .tri, body div#devskin10621483 .prevlink, body div#devskin10621483 .lit img, body div#devskin10621483 .external:after, body div#devskin10621483 .user-symbol, body div#devskin10621483 .list img, body div#devskin10621483 .commentslink, body div#devskin10621483 .gr-top span { display:none; } /* ---- Universal Selector ---- */ body div#devskin10621483 * { background:transparent; border:none; margin:0; padding:0; } /* ---- user symbols ---- */ body div#devskin10621483 .banned.username:before { content:'!' !important; } body div#devskin10621483 .group.username:before { content:'#' !important; } body div#devskin10621483 .regular.username:before { content:'~' !important; } body div#devskin10621483 .hell.username:before { content:'*' !important; } body div#devskin10621483 .hell-beta.username:before { content:'=' !important; } body div#devskin10621483 .premium.username:before { content:'*' !important; } body div#devskin10621483 .beta.username:before { content:'=' !important; } body div#devskin10621483 .senior.username:before { content:'`' !important; } body div#devskin10621483 .volunteer.username:before { content:'^' !important; } body div#devskin10621483 .admin.username:before { content:'$' !important; } /* ----- List tweaking ----- */ body div#devskin10621483 ul, body div#devskin10621483 ol, body div#devskin10621483 ul ul, body div#devskin10621483 ol ol, body div#devskin10621483 ul ul ul, body div#devskin10621483 ol ol ol { margin-left:30px; } /* ---- gr-box ---- */ body div#devskin10621483 .gr-box { background:url('https://fc06.deviantart.net/fs71/f/2013/315/e/e/journalskinbase_by_celvas-d6tvzn7.jpg') repeat; width:400px; border:1px solid #808080; border-bottom:none; border-bottom-right-radius:4px; -moz-border-bottom-right-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; -moz-border-bottom-left-radius:4px; -webkit-border-bottom-left-radius:4px; margin:auto; margin-bottom:15px; } /* ---- gr-top ---- */ body div#devskin10621483 .gr-top { background:url('https://fc06.deviantart.net/fs71/f/2013/319/7/a/infofiximage_by_celvas-d6udxpe.png') no-repeat center top; width:400px; height:92px; } /* ---- gr-top h2 ---- */ body div#devskin10621483 .gr-top h2 { padding-top:40px; color:#e9e9e9; font-family:'Verdana', sans-serif; font-size:12pt; font-weight:600; text-align:center; } body div#devskin10621483 .gr-top h2, body div#devskin10621483 .gr-top h2 a, body div#devskin10621483 .gr-top h2 a:hover { color:#e9e9e9; } /* ---- content div ---- */ body div#devskin10621483 .content { margin-bottom:-30px; padding:15px 20px; color:#333; text-align:justify; } /* ---- blockquote ---- */ body div#devskin10621483 blockquote { border:1px solid #333; width:80%; margin:auto; padding:10px; } /* ---- black bg span ---- */ body div#devskin10621483 span.blackbg { background:#a11300; padding:0 1px; color:rgb(255, 255, 255); color:rgba(255, 255, 255, 0.0); } /* ---- footer ---- */ body div#devskin10621483 .stfooter { background:url('https://fc06.deviantart.net/fs71/f/2013/319/7/a/infofiximage_by_celvas-d6udxpe.png') no-repeat 0 -262px; width:400px; height:11px; }
Well, I'll be - where did that double-colon come from? It didn't come over the sea and it wasn't in search of India. No, it came with CSS3 and it is not, as some people believe, the new single-colon.
The double-colon is W3C's attempt to clarify the distinction between pseudo-elements and pseudo-classes, both of which received the same single-colon treatment in CSS1 and 2. Basically...
::after
::before
::first-letter
::first-line
::selection
... not all of which are accessible on deviantART - are pseudo-elements. The pseudo-classes (:active, :hover, etc.) are still subject to the single-colon.
Now I have good news and bad news. The bad news is that it's CSS3, so not every browser, namely everything preceeding IE version 9, supports the double-colon just yet. The good news is that you can use the single-colon for pseudo-elements, backward compatibility-style.
Related content
Comments: 18
Ouh! I've been writing a tutorial on this very thing already XD But I've been so busy with work that I haven't had chance to complete it yet D:
Must confess though, I've still not gotten into the habit of using the double-colon... I still use singles everywhere XDĀ
š: 0 ā©: 1
Ahum... "First! 
I was a refuser out of habit, too. But since I wrote that little info dump, I miraculously got a handle on it as if it had never been otherwise.
š: 0 ā©: 1
I wouldn't say I "refuse" to use it... I'm just lazy 
š: 0 ā©: 1
That's what I meant: refuse out of habit. Habit is something you just do and also one of the most exhausting things to change. In essence, I said I was too lazy as well. By the way, that tutorial I asked you about, how is that coming along?
š: 0 ā©: 1
Not had much chance to work on it I'm afraid... Was busy building my companies new site - www.miltonbayer.com - and now I need to proof/finish DesignnHQ articles... Sorry XD It's on my to-do list!
š: 0 ā©: 0
Ooh, neat, thank you! That was a hairy one for me. I was like, "Wait? Is that right? Used to be right for IE8, but is it still right? Right? No? Yes? Darn." Think it works in IE8 now? Because if not, I would rather add that it works as of IE9, but is shunned by its evil predecessors. After all, 8 isn't far divorced from 9. Then again, I could just as welll add a disclaimer for every "What's CSS3?" browser. Anyway! Thank you very much again, Wyldwood. Appreciate it.
š: 0 ā©: 1
At University they drilled it into me to use: caniuse.com/ all the time haha
š: 0 ā©: 2
I LOVE caniuse.com <3
š: 0 ā©: 1
csslint has also been good to me when I can't find my missing semi-colon x3
š: 0 ā©: 1
Dreamweaver has that inbuilt now
š: 0 ā©: 1
Ah! Handy x3Ā
Must admit I don't use dreamweaver though... it's too heavy and clunky. Notepad++ all the way <3
š: 0 ā©: 0
Bookmarked! A great link and something to file through on a rainy day (which I really, really hope will come soon and a-plenty).
š: 0 ā©: 1
I'm really glad I get to study it at Uni 
š: 0 ā©: 1
It's definitely fortunate. Studying things that are fun and useful for future endeavors is a concept not every student is acquainted with. Myself, I'm mostly self-taught. I assume, then, that the wyldwood.org design and code is your handiwork?
š: 0 ā©: 1
wyldwood.org, wyldwoodradio.co.uk, indieshaman.co.uk aye
Truth is though that it's pointless to train in web design, there are too many WYSIWYG options for people who don't want to pay for professional sites, and everyone things they can use wordpress.
š: 0 ā©: 1
A lot of things seem to be useless, but the single-user is not at all where the money. It's with the companies, and companies still want professional, in-house or not. The Time of Desperation has not come just yet.
š: 0 ā©: 0