What is the meaning of '~' in this example? I saw this example from this tutorial. http://css-tricks.com/the-checkbox-hack/
I know it can be used to style an element completely differently depending on the state of that checkbox. However, I can't find any CSS documentation that explains '~'?
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
/* For mobile, it's typically better to position checkbox on top of clickable
area and turn opacity to 0 instead. */
}
/* Default State */
div {
background: green;
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ div {
background: red;
}
It's a selector for sibling elements. The one you have there will find all of the 'div' siblings of a checked checkbox within the same parent, but only ones that follow the checkbox in the dom. 'Div' siblings preceding the checkbox will not be included.
Awesome selectors reference, including the tilde:
http://learn.shayhowe.com/advanced-html-css/complex-selectors
It is a general sibling combinator and similar to Adjacent sibling combinator (+). The difference is that the second selector does NOT have to immediately follow the first one means It will select all elements that is preceded by the former selector.
http://www.w3.org/TR/selectors/#general-sibling-combinators
8.3.2. General sibling combinator
The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.
Example:
h1 ~ pre
represents a pre element following an h1. It is a correct and valid, but partial, description of:
<h1>Definition of the function a</h1>
<p>Function a(x) has to be applied to all figures in the table.</p>
<pre>function a(x) = 12x/13.5</pre>
Related
The :is() and :where() pseudo-class functions both take a selector list as an argument and select any element that can be selected by one of the selectors in that list. So how do they differ?
/* Selects any paragraph inside a header, main
or footer element that is being hovered */
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
/* Selects any paragraph inside a header, main
or footer element that is being hovered */
:where(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
/* Both are equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}
The difference between :where() and :is() is that :where() always has
0 specificity, whereas :is() takes on the specificity of the most
specific selector in its arguments.
The pseudo-class :is() doesn't have any weight itself (unlike most pseudo-classes, which are the equivalent of classes in calculating specificity), but the values inside it's parentheses are used to calculate specificity instead. (By the way, it's the same case with another pseudo-class, :not().)
Example:
div:where(.outer) p has a specificity score (ordered from highest to least specificity value: inline styling/style attribute, id, class/pseudo-class/attribute, element) of 0,0,0,2, while div:is(.outer) p is scored 0,0,1,2.
Here's a mnemonic: :is() is influential, :where() is worthless.
Source: MDN
Anything that :is() can do regarding grouping, so can :where() (including being used anywhere in the selector, nesting, and stacking them)
The difference is actually in specificity, that's the point which :is() and :where() strongly diverge.
:where() has no specificity (its specificity value is 0) and it squashes all the specificity in the selector list passed as functional parameters.
:is() takes the specificity of its most specific selector (it actually counts towards the specificity of the overall selector and takes the specificity of its most specific argument)
You can check out this great comparison : https://developer.mozilla.org/en-US/docs/Web/CSS/:where#examples
Things like a:link or div::after...
Information on the difference seems scarce.
The CSS 3 selector recommendation is pretty clear about both, but I'll try to show the differences anyway.
Pseudo-classes
Official description
The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.
A pseudo-class always consists of a "colon" (:) followed by the name of the pseudo-class and optionally by a value between parentheses.
Pseudo-classes are allowed in all sequences of simple selectors contained in a selector. Pseudo-classes are allowed anywhere in sequences of simple selectors, after the leading type selector or universal selector (possibly omitted). Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document.
Source
What does this mean?
The important nature of pseudo-classes is stated in the very first sentence: "the pseudo-class concept [...] permit selection". It enables the author of an stylesheet to differ between elements based on information that "lies outside of the document tree", for example the current status of a link (:active,:visited). Those aren't saved anywhere in the DOM, and there exists no DOM interface to access these options.
On the other hand, :target could be accessed via DOM manipulation (you could use window.location.hash in order to find the object with JavaScript), but this "cannot be expressed using the other simple selectors".
So basically a pseudo-class will refine the set of selected elements as any other simple selector in a sequence of simple selectors. Note that all simple selectors in a sequence of simple selectors will be evaluated at the same time. For a complete list of pseudo-class check the CSS3 selector recommendation.
Example
The following example will color all even rows gray (#ccc), all uneven rows which aren't dividable by 5 white and every other row magenta.
table tr:nth-child(2n) td{
background-color: #ccc;
}
table tr:nth-child(2n+1) td{
background-color: #fff;
}
table tr:nth-child(2n+1):nth-child(5n) td{
background-color: #f0f;
}
Pseudo-elements
Official description
Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).
A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.
This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.
Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.
Note: A future version of this specification may allow multiple pseudo-elements per selector.
Source
What does this mean?
The most important part here is that "pseudo-elements allow authors to refer to [..] otherwise inaccessible information" and that they "may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).". The biggest difference is that they actually create a new virtual element on which rules and even pseudo-class selectors can be applied to. They don't filter elements, they basically filter content (::first-line,::first-letter) and wrap it in a virtual container, which the author can style however he want (well, almost).
For example the ::first-line pseudo-element cannot be reconstructed with JavaScript, as it heavily depends on the current used font, the fonts size, the elements width, floating elements (and probably the time of the day). Well, that's not entirely true: one could still calculate all those values and extract the first line, however doing so is a very cumbersome activity.
I guess the biggest difference is that "only one pseudo-element may appear per selector". The note says that this could be subject to change, but as of 2012 I don't believe we see any different behavior in the future (it's still in CSS4).
Example
The following example will add a language-tag to every quote on a given page using the pseudo-class :lang and the pseudo-element ::after:
q:lang(de)::after{
content: " (German) ";
}
q:lang(en)::after{
content: " (English) ";
}
q:lang(fr)::after{
content: " (French) ";
}
q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
content: " (Unrecognized language) ";
}
TL;DR
Pseudo-classes act as simple selectors in a sequence of selectors and thereby classify elements on non-presentational characteristics, pseudo-elements create new virtual elements.
References
W3C
Selectors Level 3
4. Selector syntax
6.6 Pseudo-classes
7. Pseudo-elements
CSS 2.1 Specification (outdated but still informative)
5.2 Selector syntax:
A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple selector matches if all of its components match.
5.10 Pseudo-elements and pseudo-classes
A pseudo-class filters existing elements.
a:link means all <a>s that are :link.
A pseudo-element is a new fake element.
div::after means non-existing elements after <div>s.
::selection is another example of a pseudo-element.
It doesn't mean all elements that are selected; it means the range of content that is selected, which may span portions of multiple elements.
Short description that helped me to understand the difference:
Pseudo-classes describe a special state.
Pseudo-elements match virtual elements.
From the Sitepoint docs:
A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup. Some pseudo-classes are dynamic—they’re applied as a result of user interaction with the document. - http://reference.sitepoint.com/css/pseudoclasses. These would be things like :hover, :active, :visited.
Pseudo-elements match virtual elements that don’t exist explicitly in the document tree. Pseudo-elements can be dynamic, inasmuch as the virtual elements they represent can change, for example, when the width of the browser window is altered. They can also represent content that’s generated by CSS rules. - http://reference.sitepoint.com/css/pseudoelements. These would be things like ::before, ::after, ::first-letter.
Below is the simple answer:
We use pseudo-class when we need to apply css based on the state of an element. Such as:
Apply css on hover of anchor element (:hover)
Apply css when gets focus on an html element (:focus). etc.
We use pseudo-element when we need to apply css to the specific parts of an elements or a newly inserted content. Such as:
Apply the css to first letter or first line of an element (::first-letter)
Insert content before, or after, the content of an element (::before, ::after)
Below is the example of both:
<html>
<head>
<style>
p::first-letter { /* pseudo-element */
color: #ff0000;
}
a:hover { /* pseudo-class */
color: red;
}
</style>
</head>
<body>
<a href="#" >This is a link</a>
<p>This is a paragraph.</p>
</body>
</html>
A conceptual answer:
A pseudo-element refers to things that are part of the document, but you just don't know it yet. For example the first letter. Before you only had text. Now you have a first letter that you can target. It is a new concept, but was always part of the document. This also includes things like ::before; while there isn't actual content there, the concept of something before something else was always there -- now you are specifying it.
A pseudo-class is state of something in the DOM. Just like a class is a tag you associate with an element, a pseudo-class is a class that gets associated by the browser or DOM or whatever, usually as a response to a change in state. When a user visits a link -- that link can take on the state of 'visited'. You can imagine the browser applying the class 'visited' to the Anchor element. :visited would then be how you select for that pseudo-class.
Pseudo-Class
A pseudo-class is way of selecting certain parts of a HTML document, based in principle not on the HTML document tree itself and its elements or on characteristics like name, attributes or contents, but on other phantom conditions like language encoding or the dynamic state of an element.
The original pseudo-class defined dynamic states of an element that are entered and exited over time, or through user intervention. CSS2 expanded on this concept to include virtual conceptual document components or inferred portions of the document tree e.g. first-child. Pseudo-classes operate as if phantom classes were added to various elements.
RESTRICTIONS: Unlike pseudo-elements, pseudo-classes can appear anywhere in selector chain.
Example pseudo-class code:
a:link /* This selects any "a" element whose target has not been visited.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #99FF99; /* set to a pastel green */
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}
a:visited /* This selects any "a" element whose target has been visited.*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}
a:hover /* This selects any "a" element which is in a hover state. This is a state during pointer movement within the rendering region of an element. The user designates an element but does not activate it. */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}
a:focus /* This selects any "a" element which currently has focus. Focus is a state during which an element accepts keyboard input or other forms of text input. */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}
a:active /* This selects any "a" element which is in a state of activation. Active is a state during pointer activation (eg: press and release of a mouse) within the rendering region of an element.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}
A page that demonstrates a rendering of the above pseudo-class code
Pseudo-elements
PSEUDO-ELEMENTS are used to address sub-parts of elements. They allow you to set style on a part of an element's content beyond what is specified in the documents. In other words they allow logical elements to be defined which are not actually in the document element tree. Logical elements allow implied semantic structure to be addressed in CSS selectors.
RESTRICTIONS: Pseudo-elements may only be applied to external and document-level contexts - not to in-line styles. Pseudo-elements are restricted in where they can appear in a rule. They may only appear at the end of a selector chain (after the subject of the selector). They should come after any class or ID names found in the selector. Only one pseudo-element can be specified per selector. To address multiple pseudo-elements on a single element structure, multiple style selector/declaration statements must be made.
Pseudo-elements can be used for common typographic effects such as initial caps and drop caps. They can also address generated content that is not in the source document (with the "before" and "after") An example style sheet of some pseudo-elements with properties and values added follows.
/* The following rule selects the first letter of a heading 1 and sets the font to 2em, cursive, with a green background. First-letter selects the first rendered letter/character for a block-level element. */
h1:first-letter {
font-size : 2em;
font-family : "Lucida Handwriting", "Lucida Sans", "Lucida Console", cursive;
background-color : #ccffcc;
}
/* The following rule selects the first displayed line in a paragraph and makes it bold. First-line selects the first rendered line on the output device of a block-level element. */
p:first-line {
font-weight : bold;
}
/* The following rule selects any content placed before a blockquote and inserts the phrase "Quote of the day:" in bold small caps with a green background. */
blockquote:before {
content : "Quote of the day:";
background-color : #ccffcc;
font-weight : bold;
font-variant : small-caps;
}
/* The following rule selects any content placed before a "q" element and inserts the smart open quote. */
q:before {
content : open-quote;
}
/* The following rule selects any content placed after a "q" element and inserts the smart close quote. */
q:after{
content : close-quote;
}
Sources:Link
In brief, from Pseudo-classes on MDN:
A CSS pseudo-class is a keyword added to a selector that specifies
a special state of the selected element(s). For example, :hover
can be used to apply a style when the user hovers over a button.
div:hover {
background-color: #F89B4D;
}
And, from Pseudo-elements on MDN:
A CSS pseudo-element is a keyword added to a selector that lets you
style a specific part of the selected element(s). For example,
::first-line can be used to style the first line of a paragraph.
/* The first line of every <p> element. */
p::first-line {
color: blue;
text-transform: uppercase;
}
This question already has answers here:
Ampersand (parent selector) inside nested selectors [duplicate]
(3 answers)
Closed 8 years ago.
Less
.list a{
.landscape&{
height: 100%;
}
}
Outputs
.landscape.list a {
height: 100%;
}
Which means "all a tags whose parents have both .landscape and .list"
Less
.list a{
&.landscape{
height: 100%;
}
}
Outputs
.list a.landscape {
height: 100%;
}
Which means "all a tags which have class 'landscape' and whose parents have .list"
And that makes sense. But if I remove the "a" tag from those selectors, the '&' only changes the concatenation order of .list and .landscape.
What's the point ? When should I use &.class and when should I use class.& ?
The & in Less denotes the parent selector. So wherever you put the &, it replaces it with the parent selector in the CSS, if you have a space before it.
If not, i.e., no space is given before the &, it becomes the child and appends the selector with its parent like in your case.
References:
Less CSS Secrets-of-the-Ampersand
Parent Selector
The article "LESS CSS: Secrets of the Ampersand" details the difference well. I'll highlight the key uses:
Attach a class to an existing selector
Change state based on parent classes
Filter a nested selector to only match certain elements
Avoid repetition when selecting repeated elements
Simplify combinatorial explosions
The latter is my favorite. I've used it to handle some crazy IE issues. Check this out:
/**
* Add a top border to paragraphs,
* but remove that border when a preceding paragraph already has one.
*/
p {
border-top: 1px solid gray;
& + & {
border-top: 0;
}
}
I think if you can wrap your mind around what this usage of & does, all the other uses become obvious.
I’m trying to learn a bit more about the CSS3 transitions and “cool stuff”. So I have some nifty animations on my site, and I did some google research that helped me out quite a bit.
I wanted to select an element outside of my hover element. I found out that using the + sign you can target an element that comes after the hover element. A small example (in LESS):
header{
display: inline-block;
div#bg_2{
color:#000;
}
div#container{
float:left;
&:hover{
& + nav {
ul{
opacity: 0;
}
li{
.transition(1200ms, ease-in-out);
margin-left:-100px;
}
}
}
}
nav{
height:30px;
}
}
So this example allows me to give a transition to the element after the hover element. But my question is, is it possible to do the reverse? To target the element before the hover element? In the example, the bg_2 element.
The ! subject selector in the CSS Selectors 4 draft specification would be a way to select a previous element. It proposes that instead of writing .one + .two { … } to style .two, you could write !.one + .two { … } to style .one.
However, ! is currently not implemented in any browser. And the CSS Selectors 4 specification can still change, because it is a draft. Also, the spec currently marks the ! subject selector as being in the “complete” profile, which is meant to be used by JavaScript, but not in the “fast” profile, which CSS must use.
Since you can’t use !, there is currently no way to select what you want with pure CSS.
See also this answer about there being no parent selector, which links to the CSS specifications where you can find all defined selectors.
CSS alone can't currently achieve what you're after. We have sibling selectors (+ and ~), but the element being targeted must come after the first element.*
As a simple example, check out this fiddle. Given this markup:
<p class="one">One</p>
<p class="two">Two</p>
and this CSS:
.one ~ .two { background: red; }
.two ~ .one { background: green; }
You might expect .one to end up green and .two red. In reality, only .two receives a background colour, because the second line is trying to style an element that comes earlier in the DOM.
* + is the adjacent sibling combinator, ~ the general sibling combinator. See this CSS Tricks article for details. They are very similar: + will only target an element that is directly after another specific element whereas ~ will target a sibling that appear anywhere after it.
Things like a:link or div::after...
Information on the difference seems scarce.
The CSS 3 selector recommendation is pretty clear about both, but I'll try to show the differences anyway.
Pseudo-classes
Official description
The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.
A pseudo-class always consists of a "colon" (:) followed by the name of the pseudo-class and optionally by a value between parentheses.
Pseudo-classes are allowed in all sequences of simple selectors contained in a selector. Pseudo-classes are allowed anywhere in sequences of simple selectors, after the leading type selector or universal selector (possibly omitted). Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document.
Source
What does this mean?
The important nature of pseudo-classes is stated in the very first sentence: "the pseudo-class concept [...] permit selection". It enables the author of an stylesheet to differ between elements based on information that "lies outside of the document tree", for example the current status of a link (:active,:visited). Those aren't saved anywhere in the DOM, and there exists no DOM interface to access these options.
On the other hand, :target could be accessed via DOM manipulation (you could use window.location.hash in order to find the object with JavaScript), but this "cannot be expressed using the other simple selectors".
So basically a pseudo-class will refine the set of selected elements as any other simple selector in a sequence of simple selectors. Note that all simple selectors in a sequence of simple selectors will be evaluated at the same time. For a complete list of pseudo-class check the CSS3 selector recommendation.
Example
The following example will color all even rows gray (#ccc), all uneven rows which aren't dividable by 5 white and every other row magenta.
table tr:nth-child(2n) td{
background-color: #ccc;
}
table tr:nth-child(2n+1) td{
background-color: #fff;
}
table tr:nth-child(2n+1):nth-child(5n) td{
background-color: #f0f;
}
Pseudo-elements
Official description
Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).
A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.
This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.
Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.
Note: A future version of this specification may allow multiple pseudo-elements per selector.
Source
What does this mean?
The most important part here is that "pseudo-elements allow authors to refer to [..] otherwise inaccessible information" and that they "may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).". The biggest difference is that they actually create a new virtual element on which rules and even pseudo-class selectors can be applied to. They don't filter elements, they basically filter content (::first-line,::first-letter) and wrap it in a virtual container, which the author can style however he want (well, almost).
For example the ::first-line pseudo-element cannot be reconstructed with JavaScript, as it heavily depends on the current used font, the fonts size, the elements width, floating elements (and probably the time of the day). Well, that's not entirely true: one could still calculate all those values and extract the first line, however doing so is a very cumbersome activity.
I guess the biggest difference is that "only one pseudo-element may appear per selector". The note says that this could be subject to change, but as of 2012 I don't believe we see any different behavior in the future (it's still in CSS4).
Example
The following example will add a language-tag to every quote on a given page using the pseudo-class :lang and the pseudo-element ::after:
q:lang(de)::after{
content: " (German) ";
}
q:lang(en)::after{
content: " (English) ";
}
q:lang(fr)::after{
content: " (French) ";
}
q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
content: " (Unrecognized language) ";
}
TL;DR
Pseudo-classes act as simple selectors in a sequence of selectors and thereby classify elements on non-presentational characteristics, pseudo-elements create new virtual elements.
References
W3C
Selectors Level 3
4. Selector syntax
6.6 Pseudo-classes
7. Pseudo-elements
CSS 2.1 Specification (outdated but still informative)
5.2 Selector syntax:
A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple selector matches if all of its components match.
5.10 Pseudo-elements and pseudo-classes
A pseudo-class filters existing elements.
a:link means all <a>s that are :link.
A pseudo-element is a new fake element.
div::after means non-existing elements after <div>s.
::selection is another example of a pseudo-element.
It doesn't mean all elements that are selected; it means the range of content that is selected, which may span portions of multiple elements.
Short description that helped me to understand the difference:
Pseudo-classes describe a special state.
Pseudo-elements match virtual elements.
From the Sitepoint docs:
A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup. Some pseudo-classes are dynamic—they’re applied as a result of user interaction with the document. - http://reference.sitepoint.com/css/pseudoclasses. These would be things like :hover, :active, :visited.
Pseudo-elements match virtual elements that don’t exist explicitly in the document tree. Pseudo-elements can be dynamic, inasmuch as the virtual elements they represent can change, for example, when the width of the browser window is altered. They can also represent content that’s generated by CSS rules. - http://reference.sitepoint.com/css/pseudoelements. These would be things like ::before, ::after, ::first-letter.
Below is the simple answer:
We use pseudo-class when we need to apply css based on the state of an element. Such as:
Apply css on hover of anchor element (:hover)
Apply css when gets focus on an html element (:focus). etc.
We use pseudo-element when we need to apply css to the specific parts of an elements or a newly inserted content. Such as:
Apply the css to first letter or first line of an element (::first-letter)
Insert content before, or after, the content of an element (::before, ::after)
Below is the example of both:
<html>
<head>
<style>
p::first-letter { /* pseudo-element */
color: #ff0000;
}
a:hover { /* pseudo-class */
color: red;
}
</style>
</head>
<body>
<a href="#" >This is a link</a>
<p>This is a paragraph.</p>
</body>
</html>
A conceptual answer:
A pseudo-element refers to things that are part of the document, but you just don't know it yet. For example the first letter. Before you only had text. Now you have a first letter that you can target. It is a new concept, but was always part of the document. This also includes things like ::before; while there isn't actual content there, the concept of something before something else was always there -- now you are specifying it.
A pseudo-class is state of something in the DOM. Just like a class is a tag you associate with an element, a pseudo-class is a class that gets associated by the browser or DOM or whatever, usually as a response to a change in state. When a user visits a link -- that link can take on the state of 'visited'. You can imagine the browser applying the class 'visited' to the Anchor element. :visited would then be how you select for that pseudo-class.
Pseudo-Class
A pseudo-class is way of selecting certain parts of a HTML document, based in principle not on the HTML document tree itself and its elements or on characteristics like name, attributes or contents, but on other phantom conditions like language encoding or the dynamic state of an element.
The original pseudo-class defined dynamic states of an element that are entered and exited over time, or through user intervention. CSS2 expanded on this concept to include virtual conceptual document components or inferred portions of the document tree e.g. first-child. Pseudo-classes operate as if phantom classes were added to various elements.
RESTRICTIONS: Unlike pseudo-elements, pseudo-classes can appear anywhere in selector chain.
Example pseudo-class code:
a:link /* This selects any "a" element whose target has not been visited.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #99FF99; /* set to a pastel green */
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}
a:visited /* This selects any "a" element whose target has been visited.*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}
a:hover /* This selects any "a" element which is in a hover state. This is a state during pointer movement within the rendering region of an element. The user designates an element but does not activate it. */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}
a:focus /* This selects any "a" element which currently has focus. Focus is a state during which an element accepts keyboard input or other forms of text input. */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}
a:active /* This selects any "a" element which is in a state of activation. Active is a state during pointer activation (eg: press and release of a mouse) within the rendering region of an element.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}
A page that demonstrates a rendering of the above pseudo-class code
Pseudo-elements
PSEUDO-ELEMENTS are used to address sub-parts of elements. They allow you to set style on a part of an element's content beyond what is specified in the documents. In other words they allow logical elements to be defined which are not actually in the document element tree. Logical elements allow implied semantic structure to be addressed in CSS selectors.
RESTRICTIONS: Pseudo-elements may only be applied to external and document-level contexts - not to in-line styles. Pseudo-elements are restricted in where they can appear in a rule. They may only appear at the end of a selector chain (after the subject of the selector). They should come after any class or ID names found in the selector. Only one pseudo-element can be specified per selector. To address multiple pseudo-elements on a single element structure, multiple style selector/declaration statements must be made.
Pseudo-elements can be used for common typographic effects such as initial caps and drop caps. They can also address generated content that is not in the source document (with the "before" and "after") An example style sheet of some pseudo-elements with properties and values added follows.
/* The following rule selects the first letter of a heading 1 and sets the font to 2em, cursive, with a green background. First-letter selects the first rendered letter/character for a block-level element. */
h1:first-letter {
font-size : 2em;
font-family : "Lucida Handwriting", "Lucida Sans", "Lucida Console", cursive;
background-color : #ccffcc;
}
/* The following rule selects the first displayed line in a paragraph and makes it bold. First-line selects the first rendered line on the output device of a block-level element. */
p:first-line {
font-weight : bold;
}
/* The following rule selects any content placed before a blockquote and inserts the phrase "Quote of the day:" in bold small caps with a green background. */
blockquote:before {
content : "Quote of the day:";
background-color : #ccffcc;
font-weight : bold;
font-variant : small-caps;
}
/* The following rule selects any content placed before a "q" element and inserts the smart open quote. */
q:before {
content : open-quote;
}
/* The following rule selects any content placed after a "q" element and inserts the smart close quote. */
q:after{
content : close-quote;
}
Sources:Link
In brief, from Pseudo-classes on MDN:
A CSS pseudo-class is a keyword added to a selector that specifies
a special state of the selected element(s). For example, :hover
can be used to apply a style when the user hovers over a button.
div:hover {
background-color: #F89B4D;
}
And, from Pseudo-elements on MDN:
A CSS pseudo-element is a keyword added to a selector that lets you
style a specific part of the selected element(s). For example,
::first-line can be used to style the first line of a paragraph.
/* The first line of every <p> element. */
p::first-line {
color: blue;
text-transform: uppercase;
}