Shop More Submit  Join Login
×

:iconim-not-sana: More from im-not-sana


Featured in Collections

CSS Tips by poserfan

css tutorials by MelikeBAt


More from deviantART



Details

Submitted on
May 30, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
3,985 (4 today)
Favourites
68 (who?)
Comments
36
×
PE 2010 stamp by projecteducate






Table of Contents


This article has two major topics:


1. Pseudo-Elements



2. Pseudo-Classes





What's the difference between Pseudo-Elements and Pseudo-Classes?


Pseudo-Elements are used to address sub-parts of elements. They should come after any class or ID names found in the selector ex: p::first-letter where p is the element and ::first-letter is the sub-element. Pseudo-elements are usually static and can be used for common typographic effects such as caps and fonts. They can also address generated content that is not in the source document ex: ::before

Pseudo-Classes are a way to select certain parts of HTML markup and its elements or on characteristics like name, attributes or contents. Some pseudo-classes are dynamic where they're applied as a result of user interaction with the document  ex: a:hover where a is the element and :hover is the state that occurs when the user hovers over it. It also includes virtual components of the document tree ex: :nth-child(N)



Don't worry, you'll understand more as I go along with examples. All you really need to know for now is that with the introduction of CSS3, the major difference between the two can be seen with the colon :
Pseudo-Classes have one colon :
ex: p:first-letter{}
Pseudo-Elements have two colons ::
ex p::before{}
And I have colon greater than :>

Anyway, browsers still support the CSS2.1 specifications of using one colon : for older pseudo-elements
ex: p:before{}
So it won't matter if you use one or two colons for the older ones but for the ones introduced in CSS3 they can only be used with two colons to emphasize the difference between elements and classes.

Note: Since most of these pseudo-elements are from CSS2.1, I won't go too in-depth but perhaps show interesting tricks instead. And because there's far too many pseudo-classes to cover, for now I'll just explain the few important ones and will add the others in later when I have more time. So keep checking back for updates!

Pseudo-Elements



The sub-topics I'll be covering consist of ::first-letter, ::first-line and ::selection as well as ::before and ::after with generated content:" ";

::first-letter


Quite simply, this changes the style of the first letter of your text. You can specify exactly what you want to change about that text. In the following example I just changed the size and font of the first letter to imitate the beginning of a chapter in a novel.

CSS
p {color:black;}
p::first-letter {
font-size: 28px;
font-family: 'Lobster', cursive;
}

HTML
<p>Add your text here.</p>

OUTPUT


Once upon a time, it was the end.
Fig. 1

::first-line


This affects the first line in a sentence or paragraph. You can add different text styles. In the following example, I just used it to make the first line of the paragraph in small caps.

CSS
p {color:black;}
p::first-line {
font-variant:small-caps;
}

OUTPUT


Doesn't it sound like I'm shouting when you read the first line in your mind?
Fig. 2

::selection


This affects the text that you want to highlight. How do you highlight? You simply hold left click with the mouse and drag across the text. Usually used when copying part of some text. There's two different syntax that you must include for full browser compatibility.
::selection{} for all Browsers
::-moz-selection{} for Firefox

Note: This is the only pseudo-element that won't work with one colon ex: :selection{} since it was just introduced in CSS3

In the following example, I'm only going to change the highlighted color of text in italic so you can see the difference.

CSS
i::selection {
color: red;
background: yellow;
}

i::-moz-selection{
color: red;
background: yellow;
}

HTML
The highlighted text <i>goes in here!</i>

OUTPUT


This is some text that you should highlight!
Fig. 3

::before and ::after


Pseudo-elements also provide coders a way to refer to content that does not exist in the source document which give access to generated content. As the name says, it either generates some content before the element or after the element. You can either use it to insert textual content (string), an image, a counter, attributes, or quotation marks. In the following example, I'll be adding auto-generated quotes around the text.

CSS
blockquote::before {
content: open-quote;
font-size: 28px;
font-family: 'Lobster', cursive;
}

blockquote::after{
content: close-quote;
font-size: 28px;
font-family: 'Lobster', cursive;
}

HTML
<blockquote>Add Text Here</blockquote>

OUTPUT


To Quote
or
Not To Quote!

Fig. 4

Use ALL the Pseudo-elements! :iconallthethingsplz:


Now we can style a blockquote using all the elements we've learned so far!

What a fancy looking blockquote if I do say so myself, ye ol' Chap!

Fig. 5

I'm sure you'll be able to get more creative than that ^ But you can see that I've included a linear-gradient from the previous article as the background color, changed the first letter's font and size, the first line is capitalized, the color changes when selected, and added quote marks around the paragraph text.

Note: Using ::first-letter and ::before with generated content on the same element will affect the first letter of the content in ::before ex:
blockquote::before {content: open-quote}
blockquote::first-letter {font-size: 28px}

This will render the opening quote mark " with the large font size instead of the first letter of the sentence.

To solve this, it's better to separate the two with different tags but one class as you can see the structure of the HTML below where I created one blockquote class called .fancy{}, in which the ::before and ::after affect, that embodies a .fancy p{} class, in which the ::first-line and ::first-letter affect

HTML
<blockquote class="fancy"><p>Add Text Here</p></blockquote>

CSS
.fancy{
width: 200px;
padding: 20px;
background: linear-gradient(rgba(238,238,238,1), rgba(204,204,204,1) 100%);
}

.fancy p::first-letter {
font-size: 28px;
font-family: 'Lobster', cursive;
}

.fancy p::first-line {
font-variant:small-caps;
}

.fancy::before {
content: open-quote;
float: left;
font-size: 30px;
}

.fancy::after{
content: close-quote;
float: right;
font-size: 30px;
}

.fancy p::selection {
color: white;
background:black;
}

.fancy p::-moz-selection{
color: white;
background: black;
}


Challenge!


Try to create a fancy blockquote with a triangle and icon using Pseudo-Elements!

:iconisayplz:

What a fancier looking blockquote if I do say so myself!
Fig. 6 - Click here for template

Hint: You can use ::before for this but leave content:""; empty and use it to make the triangle borders. Make use of negative margin to position the elements.

Try to think of other creative ways to make use of ::before and ::after



Pseudo-Classes



CSS3 has many pseudo-classes but I'll only be discussing a few in which one is the most powerful pseudo-class that allows the CSS designer to select multiple elements according to their positions in a document tree. Using these pseudo-classes can be a little confusing at first as it involves a bit of math, but it's easy once you get the hang of it.

Dynamic Pseudo-Classes


This is pretty simple, with these available pseudo-classes you can style how an element like links look according to user input, such as when the user hovers or clicks. It's easy to create buttons this way.

a:link{} is an unvisited link. How users use just a{} to style un-visited link, using :link allows better flexibility.

a:visited{} are links that have already been visited.

a:hover{} is the state when a user hovers over the link with their mouse

a:active{} is the state when a user clicks on the link with their mouse. Good for giving the effect of a button being pressed down. I've added the button from the previous article.

Fig. 7 - Click to see template

a:focus{} The :focus selector, similar to :hover, is allowed on elements that accept keyboard events or other user inputs. You can combine them as well with a:focus:hover{}


Fig. 8 - Click here for template

:nth-child(N)


:nth-child(N), where N is the argument that you specify, will give you the opportunity to select specific parts of elements. For example, if you want to style only the border on odd number of images in your thumbs, N = odd

ex: img:nth-child(odd){border: 5px solid black;}

Fig. 9 - Click Here to see Live Preview

N can be a keyword like odd or even, a number like 1 or 5 or a number expression in an+b format where a and b are integers ex: 2n+1

p:nth-child(1){} is equivalent to p:first-child{} that was released in CSS2.1

:nth-child(an+b)
an+b is called a number expression where a and b are replaced with numbers. Number b represents the ordinal position of the first element that we want to match, and the number a represents the ordinal number of every element we want to match after that.

For example:
The expression 2n+1 = every odd element
The expression 2n+2 = every even element
The expression 3n+1 will match the first element, then every third element after that.
So: 1 2 3 4 5 6 7 8 9 10 11 etc.
The expression 3n+2 will match the second element, and every third element after that.
So: 1 2 3 4 5 6 7 8 9 10 11 etc.

All starting to make sense now?



:last-child


This is very simple really. It affects only the last sub-element in an array of elements. It's the opposite of :first-child

For example, if you want to style only the border on the last image in your gallery:
img:last-child{border: 5px solid white;}


Fig. 10 - Click Here to see Live Preview

Add ALL the Pseudo-Classes :iconallthethingsplz:


The following example shows you how you can use all the Pseudo-Classes I've mentioned in this article in a list to style a link on hover, when clicked on, the even items in a list, and the last child in a list.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
Fig. 11 - Hover over items and click

As you can see in the example above, I've made all normal items in a list black, but the even child is blue. All the items on hover should be yellow and green when clicked on but the :nth-child(even) and :last-child overrides that. Have a look at the code below and see if you can come up with something more interesting :)

HTML
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li><li>Item 6</li><li>Item 7</li><li>Item 8</li><li>Item 9</li></ul>

CSS
li{
display: inline-block;
list-style-type:none;
margin: 5px;
color: black;
}

li:hover{
color: yellow;
}

li:active{
color: green;
}

li:nth-child(even) {
color: blue;
}

li:last-child{
color: red;
}

Unfortunately, that's all I've got to explain for today. Like I mentioned before, I'll update this article when I get more time with more pseudo-classes that work in deviantART, step-by-step on how they work and how you can use them on your web pages. See ya next article!



TL;DR - Documentation



::first-letter{}

::first-line{}

::selection{}
::-moz-selection{}


::before{content:"";}
Empty: ""
Text: "String Text"
Opening Quotation Marks: open-quote
Closing Quotation Marks: close-quote
URI: url(image-link)
Attribute: attr(X)

::after{content:"";}
Empty: ""
Text: "String Text"
Opening Quotation Marks: open-quote
Closing Quotation Marks: close-quote
URI: url(image-link)
Attribute: attr(X)

a:link{} /* unvisited links */
a:visited{} /* visited links */
a:hover{} /* user hovers */
a:active{} /* active links */
a:focus:hover{}


:nth-child(N){}
N keyword: odd or even
N number: 1
N number expression: an+b

:last-child{}


Useful Links

If you'd like to learn more about CSS basics, I suggest you have a look at these groups:
:iconcss-dyk: :iconecssited:
Create your own Journal Skin by miontre
CSS3 Attribute Selectors by electricjonny
Advanced Typography by LabLayers for CSS-DYK

Test out CSS3 snippets with an instant Live Preview in this CSS Sandbox:


Journal Skins Examples


Stop SOPA Blackout Skin by GillianIvy
::selection{}
Default Blue by im-not-sana
blockquote w/ triangle and icon using :before{}

If you have created any Free Skins with Pseudo-Elements or Classes, leave a comment with a link to your deviation and specify which you have used so I can add here




#ProjectEducate presents CSS3 101 - Pseudo-Elements and Pseudo-Classes compiled by `im-not-sana.

CSS3 101 Topics:
May 27th - Introduction
May 28th - Color Gradients
May 30th - Pseudo-elements & Pseudo-classes
May 31st - Transition Animations
June 2nd - Conclusion
Add a Comment:
 
:iconsulaman:
sulaman Featured By Owner Sep 16, 2013
A small example of :before and :after



Can check similar stuff on the below URL.

This is all browser incompatible.

Using CSS/3 icons reduces the HTTP request which in turn decreases your website file size.

Hope you like it!
Reply
:iconiamoret:
iAmoret Featured By Owner Jun 3, 2013  Hobbyist Photographer
Me and .blockquote are not friends. :no: What is he here for, what does he do!? :iconscreamingemoteplz:

(literally four hours later I complete typing this comment :roll:)

I have to say that, unfortunately, you have defeated me (this time ;))- no matter what I do, I cannot seem to make a freaking triangle! :icontableflipitplz: So this is as far as I got. :saddummy: Do I get bonus points for finally using rgba? :giggle:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner Jun 4, 2013  Hobbyist General Artist
Oooh looks lovely! :clap:

Well, the secret to the triangle is that you have to add that code I wrote in the template with the borders (don't remove the transparent color) in either ::before or ::after, in your case probably ::after is better since you put quote marks in ::before. And then position it properly with position:absolute; and margin. That's all there is to it :D
Reply
:iconiamoret:
iAmoret Featured By Owner Jun 6, 2013  Hobbyist Photographer
I fixeded it! :dummy: (I think.... It looks right from where I'm doing it, but when you click the link, it shows it just smacked into the center :confused: But if you backspace the 20 and type it in again, it shows up fine ;))
Reply
:iconim-not-sana:
im-not-sana Featured By Owner Jun 6, 2013  Hobbyist General Artist
Awesome you did it! :dance: Only thing is that there's two ::after and it should be only one:
.fancy::after {
content:"";
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid rgba(0, 280, 20, .5);
position:absolute;
margin-left: -79;
margin-top: -20;
}
Reply
:iconiamoret:
iAmoret Featured By Owner Jun 6, 2013  Hobbyist Photographer
But.... but.... it wasn't working with just one.... :saddummy:
Reply
:iconelectricjonny:
electricjonny Featured By Owner Jun 1, 2013  Hobbyist Photographer
I'm pretty fond of the attr you can do for before/after, for example:

/* stick the exact time on the timestamps */
.cc-time a:after, div.mcbox span.mcb-ts span:after, .details-section span[offset]:after {
        content:" - "attr(title);
}
Reply
:iconim-not-sana:
im-not-sana Featured By Owner Jun 1, 2013  Hobbyist General Artist
Ooh yeah that's a nifty trick :thumbsup:

I do need to explain the :before/:after contents in details.. will add them in tomorrow :nod:
Reply
:iconelectricjonny:
electricjonny Featured By Owner Jun 1, 2013  Hobbyist Photographer
Yeah, before/after can be a bit confusing to understand. Keep up the good work :thumbsup:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner Jun 1, 2013  Hobbyist General Artist
Yeah definitely, along with a lot of the other pseudo-classes. And thanks a lot! Writing up these articles for beginner-level in just a week was far too stressful :faint:
Reply
Add a Comment: