CSS Pseudo-Classes And Pseudo-Elements

Without getting overcomplicated and technical definition, Pseudo-classes is a specific characteristic of an element that can be target with CSS. A few common and known Pseudo classes are :link, :visited, :hover, :active, :first-child, :last-child. There are many more we are going to each of them in this article.
Pseudo-classes are always preceded by a colon (:) and then comes a name of pseudo-class and sometimes a value in parenthesis :nth-child(n) anyways?

Pseudo-elemnts are like virtual elements that can be treated as an html elements. The thing is that they doesn’t exist in DOM. This means we actually don’t type pseudo-elements, but rather create them with the css.
A few of pseudo-elements are :after, :before and :first-letter, we will talk about them at the end of article.

Single or Double Colon for pseudo-elements ?

The short answer is , in most cases, either.
The double colon (::) was introduced in CSS3 to differentiate pseudo-elements and pseudo-classes such pseudo-elements ::before and ::after from pseudo-classes :hover and :active. All browser support double colon (::) except IE8 and below.

When not to use CSS generated content.
Generating content via css is achieved by combining the CONTENT CSS property with :before and :after pseudo-elements. This “content” may be a plain text or contain that we manipulate with CSS to display.
Use CSS generated content for decoration and non-vital information, but make sure its properties handled by screen-readers, so that people with assistive technologies are not distracted.

Experimental pseudo-Classes and pseudo-elements.

An experimental pseudo-classes and pseudo-elements means its specification is not stable or finalized. The syntax and behaviour could change on the road. However, we might able to use experimental pseudo-classes and pseudo-elements now by applying vendor prefixes.
So below are the pseudo-elements and pseudo-classes we are going to look in this article. The psuedo-classes and psuedo–elements are categorised for sake of understanding.
1

 

  • STATES
    ⦁ :link
    ⦁ :visited
    ⦁ :hover
    ⦁ :active
    ⦁ :focus

    LANGUAGE
    ⦁ :dir
    ⦁ :lang

    OTHER
    :root
    ⦁ :fullscreen
  • Structural
    :first-child
    ⦁ :first-of-type
    ⦁ :last-child
    ⦁ :last-of-type
    ⦁ :not
    ⦁ :nth-child
    ⦁ :nth-last-child
    ⦁ nth-of-last–type
    ⦁ :only-child
    ⦁ only-of-type
    ⦁ :target
  • VALIDATION
    ⦁ :checked
    ⦁ :default
    ⦁ :disabled
    ⦁ :empty
    ⦁ :enabled
    ⦁ :in-range
    ⦁ :out-of-range
    ⦁ :indeterminate
    ⦁ :valid
    ⦁ :invalid
    ⦁ :optional
    ⦁ :read-only
    ⦁ :read-write
    ⦁ :required
    ⦁ :scope

pseudo-elements
⦁ ::before/:before
⦁ ::after/ :after
⦁ ::backdrop/ :backdrop
⦁ ::first-letter/:first-letter
⦁ ::first-line/:first-line
⦁ ::selection/:selection
⦁ ::placeholder/:placeholder

STATES

As a category name suggests these pseudo-classes related to the state of that element with or without any action of the user. The order of all four is this :link, :visited, :hover, :active.

⦁ :link =>
The :link pseudo-class represent the normal state of the links and use to select the link that have not yet visited

a:link {
color: orange;
}

⦁ :visited
The :visited pseudo-class is used in links that have been visited .

a:visited {
 color: blue;
}

⦁ :hover
The :hover pseudo-class is to style an element when users point is above that element. Its doesn’t have to be restricted to the links, although that is most common use.

a:hover {
 color: orange;
}

⦁ :active
The :active class is use to style an element that has been “activated” either by a pointing device or by tap on a touchscreen device. It also can be triggered by keyboard, just like :focus psuedo-class.
It works same as a :focus just the difference is that :active psuedo-class is an event that occurred betn the mouse button being clicked and released.

a:active {
 color: rebeccapurple;
}

⦁ :focus
The :focus psuedo-class is used to style an element that has gained focus via pointing device from a tap on a touchscreen device or via the keyboard. It’s used a lot in form element.


a:focus {
color: green;
}

OR

input:focus {
 background: #eee;
}

Bonus Content =>
if you work with css-preprocessor such as SASS, this bonus content might interest you.
You can create mixing and use in sass the Idea behind the mixin no default are declared in the arguments. So, we are forced in friendly way to declare all our four states of our link.

@mixin links ($link, $visited, $hover, $active) {
 & {
 color: $link;
 &:visited {
 color: $visited;
 }
 &:hover {
 color: $hover;
 }
 &:active, &:focus {
 color: $active;
 }
 }
}

Structural
Structural psuedo-classes are target additional information in the DOM and can not represented by another type of selectors or Combinator.
⦁ :first-child
The :first-child psuedo-class represents the first child of its parent element. In the following example the first li element will be the only with the orange text.
HTML






<ul>





<li>This text will be orange.</li>










<li>Lorem ipsum dolor sit amet.</li>










<li>Lorem ipsum dolor sit amet.</li>





</ul>





CSS

li:first-child {
 color: orange;
}

⦁ :first-of-type
The :first-of-type psuedo-class represent the first element if its kind in parent container.
In the following example, the first li element and the first span element will be the only once with orange text.
HTML






<ul>





<li>This text will be orange.</li>










<li>Lorem ipsum dolor sit amet.</li>










<li>Lorem ipsum dolor sit amet.</li>





</ul>





CSS

ul :first-of-type {
 color: orange;
}

⦁ :last-child
The :last-child psuedo-class represent the last child element in its parent container.
In the following example, the last li element will be only one with orange text.
HTML






<ul>





<li>This text will be orange.</li>










<li>Lorem ipsum dolor sit amet.</li>










<li>Lorem ipsum dolor sit amet.</li>





</ul>





CSS

li:last-child {
 color: orange;
}

⦁ :last-of-type
The :last-of-type psuedo-class represent the last element of its kind in parent container.
The following example the last li and the last span element will be the only one with orange text.
HTML






<ul>





<li>This text will be orange.</li>










<li>Lorem ipsum dolor sit amet.</li>










<li>Lorem ipsum dolor sit amet.</li>





</ul>





CSS

ul :last-of-type {
 color: orange;
}

⦁ :not
The :not psuedo-class is also known as negative psuedo-class. It accept an argument basically, another “selector” inside parenthesis The argument basically the another psuedo-class.
It may be chained but may not contain any :not selector.
In the following ex the :not psuedo-class matches an element that is not represented by the argument.
HTML






<ul>





<li>This text will be orange.</li>










<li>Lorem ipsum dolor sit amet.</li>










<li>Lorem ipsum dolor sit amet.</li>





</ul>





CSS

li:not(.first-item) {
 color: orange;
}

⦁ :nth-child
The :nth-child psuedo-class targets one or element depending on their order in markup. This psuedo-class is one of the most versatile and robust psuedo-class in CSS.
All of the :nth psuedo-class take an argument, which is a formula that we type in parenthesis, The formula may be a single integer, structure as an+b or the keyword odd or even.
HTML






<ol>





<li>Alpha</li>










<li>Beta</li>










<li>Gamma</li>










<li>Delta</li>










<li>Epsilon</li>










<li>Zeta</li>










<li>Eta</li>










<li>Theta</li>










<li>Iota</li>










<li>Kappa</li>





</ol>





CSS

ol :nth-child(2) {
 color: orange;
}

even no

ol :nth-child(even) {
 color: orange;
}

Let’s select every other child, starting from the sixth.

ol :nth-child(2n+6) {
 color: orange;
}

⦁ :nth-last-child
The :nth-last-child psuedo-class basically works the same as :nth-child except that it selects elements starting from the end rather than from beginning.

ol :nth-last-child(2) {
 color: orange;
}

⦁ :nth-of-type
The :nth-of-type psuedo-class works basically the same as :nth-child the main difference is that it’s more specific becoz we are targeting a specific element relative to like element contained within the same parent element.
In the following example all second in any given container will be orange.
HTML






<article>





<h1>Heading Goes Here</h1>





Lorem ipsum dolor sit amet.
 <a href=""><img src="images/rwd.png" alt="Mastering RWD"></a>
this text will be orange.
</article>





cSS

p:nth-of-type(2) {
 color: orange;
}

⦁ :nth-of-last-type
The nth-last-of-type psuedo-class works the same as :nth-of-type, the difference being that it starts counting from the end of the list rather than the beginning .
In the following ex becoz we’re starting from the bottom all first paragraph will be orange.

p:nth-last-of-type(2) {
 color: orange;
}

⦁ only-child
The :only-hild psuedo-class target the only child of a parent element.
In the following ex the first ul element has a single child which will be given orange text and the second ul element has several children; therefore, its children won’t affected by :only-child psuedo-class .
HTML






<ul>





<li>This text will be orange.</li>





</ul>










<ul>





<li>Lorem ipsum dolor sit amet.</li>










<li>Lorem ipsum dolor sit amet.</li>





</ul>





CSS

ul :only-child {
 color: orange;
}

⦁ only-of-type
the :only-of-type psuedo-class targets an element that has no sibling of that particular type.
This is similar to :only-child except we can target specific element and make the selector more meaningful.
in the following ex the first ul has a single child which will be given orange text.

li:only-of-type {
 color: orange;
}

⦁ :target
The :target psuedo-class well……..targets the unique ID of an element and the hash in the URL.
In the following ex the article with the ID of target will be targeted when the URL in the browser end with #target
http://example.com/#target
HTML






<article id="target">





<h1><code>:target</code> pseudo-class</h1>





Lorem ipsum dolor sit amet, consectetur adipisicing elit!
</article>





CSS

:target {
 background: yellow;
}

VALIDATION

Forms have always been the bane of web design and developement. With the help of validation psuedo-class , we can make the process of filling out forms a smoother and more pleasant experience.

⦁ :checked
The :checked psuedo-class targets radio button, checkbox and option elements that have been checked or selected.
In the following ex when the checkbook is checked the label is highlighted thus enhancing the user experience.

⦁ :default
The :default psuedo-class targets the default element in the form among the group of similar elements.
In case you need to target the default button in a form that does not have a class , you can use :default psuedo-class

⦁ :disabled

The :disabled pseudo-class targets a form element in the disabled state. An element in a disabled state can’t be selected, checked or activated or gain focus.

In the following example, the input for the name field is disabled, so it will be shown as 50% transparent.
HTML

<input type="text" id="name" disabled>

CSS

:disabled {
 opacity: .5;
}

⦁ :empty

The :empty pseudo-class targets elements that have no content in them of any kind at all. If an element has a letter, another HTML element or even a space, then that element would not be empty.

Here is what is considered empty and not empty:

Empty
No content or characters would appear in an element. An HTML comment inside an element does not count as content in this case.
Not empty
Characters would appear inside the element. Even a space would be considered content.
In the following example:

the top container has text, so it will have an orange background;
the second container has a space, which is considered content, so it will have an orange background as well;
the third container has nothing in it (it’s empty), so it will have a yellow background;
the last container has only an HTML comment (it’s empty, too), so it will have a yellow background as well.
HTML






<div>This box is orange</div>










<div> </div>










<div></div>










<div><!-- This comment is not considered content --></div>





CSS

div {
 background: orange;
 height: 30px;
 width: 200px;
}

div:empty {
 background: yellow;
}

⦁ :enabled

The :enabled pseudo-class targets elements that are enabled. All form elements are enabled by default — that is, until we add the disabled attribute to the element in the markup.

We can use a combination of :enabled and :disabled to provide visual feedback, thus improving the user experience.

In the following example, after having been disabled, the input for name is enabled and so is given an opacity value of 1 and a 1-pixel green border:

:enabled {
 opacity: 1;
 border: 1px solid green;
}

Tip: Using enabled=”enabled” in the markup isn’t required. You can accomplish the same result using only the enabled attribute. Keep in mind, though, that enabled=”enabled” is required in XHTML.

⦁ :in-range

The :in-range pseudo-class targets elements that have a range and whose values are within the defined range.

In the following example, the input element supports a range between 5 and 10. Values within this range will trigger a green border.
HTML

<input type="number" min="5" max="10">

CSS

input[type=number] {
 border: 5px solid orange;
}

input[type=number]:in-range {
 border: 5px solid green;
}

⦁ :out-of-range

The :out-of-range pseudo-class targets elements that have a range and whose values fall outside of the defined range.

In the following example, the input element supports a range between 1 and 12. Values outside of this range will trigger an orange border.
HTML

<input id="months" name="months" type="number" min="1" max="12">

CSS

input[type=number]:out-of-range {
 border: 1px solid orange;
}

⦁ :indeterminate
The :indeterminate pseudo-class targets input elements such as radio buttons and check boxes that are not selected or that are unselected upon the page loading.

An example of this is when a page loads with a group of radio buttons and no default or preselected radio button has been set, or when a checkbox has been given the indeterminate state via JavaScript.
HTML






<ul>





<li>
 <input type="radio" name="list" id="option1">
 <label for="option1">Option 1</label>
</li>










<li>
 <input type="radio" name="list" id="option2">
 <label for="option2">Option 2</label>
</li>










<li>
 <input type="radio" name="list" id="option3">
 <label for="option3">Option 3</label>
</li>





</ul>





CSS

:indeterminate + label {
 background: orange;
}

⦁ :valid
The :valid pseudo-class targets a form element whose formatting is correct according to that element’s required format.

In the following example, the email input field has a correctly formatted email structure; so, the field would be considered valid and would appear with a 1-pixel green border:

input[type=email]:valid {
 border: 1px solid green;
}

⦁ :invalid

The :invalid pseudo-class targets a form element whose formatting is not correct according to that element’s required format.

In the following example, when the email input field has an incorrectly formatted email structure, the value would be considered invalid, and so an orange border would appear around the field:

input[type=email]:invalid {
 background: orange;
}

⦁ :optional

The :optional pseudo-class targets input fields that are not required in a form. In other words, as long as an input doesn’t have the required attribute, it can be targeted with the :optional pseudo-class.

In the following example, the field is optional. It doesn’t have the required attribute, so the text will appear gray.

HTML

<input type="number">

CSS

:optional {
 color: gray;
}

⦁ :read-only

The :read-only pseudo-class targets an element that cannot be edited by the user. It’s similar to the :disabled pseudo-class; the attribute used in the markup would determine which pseudo-class we should use.

This would be useful, for example, in a form where we need to show pre-populated information that cannot be altered but that still needs to be displayed within the form element for submission purposes.

In the following example, the input element has a read only HTML attribute. So, it can be targeted with the :read-only pseudo-class, which we will use to give it gray text.

HTML

<input type="text" value="I am read only" readonly>
CSS:

CSS

input:read-only {
 color: gray;
}

⦁ :read-write
The :read-write pseudo-class targets elements that can be edited by the user. It can work on elements that have the contenteditable HTML attribute as well.

This pseudo-class can be combined with the :focus pseudo-class to enhance the UX in certain situations.

In the following example, the user would be able to edit the div by clicking on it. We could enhance the user experience by applying a particular style that differentiates this piece of content from the rest, providing a visual cue to the user that this content can be edited.

HTML






<div class="editable" contenteditable>





<h1>Click on this text to edit it</h1>





Lorem ipsum dolor sit amet, consectetur adipisicing elit!
</div>





CSS

:read-write:focus {
 padding: 5px;
 border: 1px dotted black;
}

⦁ :required
The :required pseudo-class targets input elements that have the required HTML attribute.

In addition to relying on the traditional asterisk (*) on an input element’s label to denote that it is required, we could also style the field with CSS. Basically, we get the best of both worlds.

In the following example, the input field has the required HTML attribute. We can enhance the UX by applying a particular style that gives a visual cue that the field is… well, required.

HTML

<input type="email" required>

CSS

:required {
 color: black;
 font-weight: bold;
}

⦁ :scope
The :scope pseudo-class makes most sense when it’s tied to the scoped HTML attribute in a style tag.

If there is no scoped attribute in a style tag within a section of the page, then the :scope pseudo-class will traverse all the way up to the html element, which is basically the default scope of a style sheet.

In the following example, the HTML block has a scoped style sheet, and so all text in the second section element will be shown in italics.






<article>





<section>





<h1>Lorem ipsum dolor sit amet</h1>





Lorem ipsum dolor sit amet.
</section>










<section>





<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20scoped%3E%0A%20%3Ascope%20%7B%0A%20font-style%3A%20italic%3B%0A%20%7D%0A%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />










<h1>This text will be italicized</h1>





This text will be italicized.
 </section>





</article>





pseudo-elements

⦁ ::before/:before

The :before pseudo-element, like its sibling :after, adds content (text or a shape) to another HTML element. Again, this content is not actually present in the DOM but can be manipulated as if it were. And the content property needs to be declared in the CSS.

Remember that text added with this pseudo-element cannot be selected.

HTML






<h1>Ricardo</h1>





CSS

h1:before {
 content: "Hello "; /* Note the space after the word Hello. */
}

This will render like

Hello Ricardo!

⦁ ::after/ :after
The :after pseudo-element is used to add content (either text or a shape) to another HTML element. This content is not actually present in the DOM, but it can be manipulated as if it were. In order for it to work, the content property needs to be declared in the CSS.

Note that any text added with this pseudo-class cannot be selected.

HTML






<h1>Ricardo</h1>





CSS

h1:after {
 content: ", Web Designer!";
}

This will render like

Ricardo, Web Designer!

⦁ ::backdrop/ :backdrop

The ::backdrop pseudo-element is a box that is generated behind the full-screen element but that sits above all other content. It’s used in combination with the :fullscreen pseudo-class to change the background color of a maximized screen — in case you don’t want to go with the default black.

Note: The ::backdrop pseudo-element requires a double colon; it doesn’t work with a single colon.

HTML









<h1 id="element">This heading will have a solid background color in full-screen mode.</h1>








<button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>

CSS

h1:fullscreen::backdrop {
 background: orange;
}

⦁ ::first-letter/:first-letter

The :first-letter pseudo-element selects the first letter in a line of text.

If an element is included before that line, such as an image, video or table, then the first letter is not affected and can still be selected.

This is a great feature to use in paragraphs, for example, to enhance typographic appeal, without having to resort to an image or external assets.

Tip: For text generated with the :before pseudo-element, the first letter of that text will be targeted, even though it is not present in the DOM.

CSS

h1:first-letter {
 font-size: 5em;
}

⦁ ::first-line/:first-line

The :first-line pseudo-element targets the first line of an element. It works only on block-level elements, not inline elements.

When used in a paragraph, for example, only the first line of that paragraph will be styled, even if the text wraps.

CSS

p:first-line {
 background: orange;
}

⦁ ::selection/:selection
The ::selection pseudo-element is used to style the portion of a document that has been highlighted.

Until further notice, Gecko-based browsers required the prefixed version: ::-moz-selection.

Note: Combining the prefixed and unprefixed versions in a single rule won’t work. We need to create two separate rules.

CSS

::-moz-selection {
 color: orange;
 background: #333;
}

::selection {
 color: orange;
 background: #333;
}

⦁ ::placeholder/:placeholder

The ::placeholder pseudo-element targets placeholder text used in form elements via the placeholder HTML attribute.

It can also be written as ::input-placeholder, which is actually the syntax used in CSS.

Note: This pseudo-element is not a part of the standard and its implementation will very likely change in future, so use with caution.

HTML

<input type="email" placeholder="name@domain.com">

CSS

input::-moz-placeholder {
 color:#666;
}

input::-webkit-input-placeholder {
 color:#666;
}

/* IE 10 only */
input:-ms-input-placeholder {
 color:#666;
}

/* Firefox 18 and below */
input:-moz-input-placeholder {
 color:#666;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s