DEV Community: Akash Kadlag

CSS Position Ultimate Guide 2022.

Akash Kadlag — Tue, 23 Aug 2022 11:51:00 +0000

Confused with CSS Position...?

In this article, I will be breaking down all CSS position properties and explaining everything you need to know about them. This includes even the more obscure concepts related to the position that most articles/videos ignore.

Prerequisite

To get the most out of this article, we need the following:

Basic understanding of HTML.
Basic understanding of CSS. (check out CSS Selctors)
Visual studio code or any IDE of our choice to code along.

CSS Positions

When building a webpage, there can be multiple elements on our page, each with their own positions, uses, and designs. It’s important to learn how we can arrange these elements and have control over their layout.

The position property in CSS determines how an element is positioned in a document. It specifies the type of positioning method for each element.

Values of CSS Positions

The position property can have any of these values:

static
absolute
relative
fixed
sticky

You can also specify the value of inherit, which means the value is determined from the parent element. The position value doesn’t cascade, so this can be used to specifically force it to, and inherit the positioning value from its parent.

Placement Properties

Position property on its own is not that useful. It only says how the position should be calculated. For example, relative to the normal position of an element.

But we also need to define where exactly the element should be placed, not only how. There are several properties we can use for that.

top
left
right
bottom
z-index

These define how much the element's position should be adjusted and in which direction.

Normal Flow

Before going into details, let's see how these elements automatically get their position on your page. To understand this, you need to understand the normal flow of the web page. Normal flow is how the elements are arranged on a page if you haven't changed their layout.

There are two types of elements on a web page. Block-level elements and inline elements.

Block-level elements such as <h1>, <div>, <p> are contained on their own line. Because block-level elements start with a line break, two block-level elements can't exist on the same line without styling.

Inline elements such as <a>, <img>, <span>, don't form their own blocks. Instead, they are displayed within lines. They line up next to one another horizontally; when there isn't enough space left on the line, the content moves to a new line.

Static Position

position: static is the default value provided by HTML. This means if we don’t declare position for an element in CSS, it will automatically be set to static.

Even though it is a default value, it can sometimes be useful to set it explicitly. For example, to override different position value, which is set elsewhere.

Elements that are statically positioned will follow the normal document flow and will position itself based on the standard positioning rules.

Unlike with other position values, when using static, placement properties such as top, left, bottom, right, or z-index have no effect.

Example to illustrate Static Position :

We are using the following HTML markup:

<div class="parent">
    Parent
    <div class="one">
      One <br>
      position:static <br>
      top: 50px ( this has no effect )
   </div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>

And here’s the CSS we’re using:

.parent { 
   // No position set, so it's static 
} 
.one { 
   // No position set, so it's static 
   top: 50px; 
}

However, here is how it will look on a webpage:

View original code in CodePen

Since both elements have a static position, none of the layout CSS properties will do anything. This makes the top property have no effect on how the element with class="one" is displayed.

Relative Position

Relative position means that the element is placed relative to its original position in the page. A relative position element works exactly the same as static position, but you can now add z-index, top, left, right, and bottom properties to it.

If you make an element relative positioned without setting any of these extra properties you will notice it looks exactly the same as a static positioned element. This is because relative positioned elements also follow the normal document flow, but you can offset them using the top, left, right, and bottom properties.

Example to illustrate Relative Position :

We are using the following HTML markup:

<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>

And here’s the CSS we’re using:

.one {
  position: relative;
  top: 15px;
  left: 15px;
}

However, here is how it will look on a webpage:

View original code in Codepen

As a result of an element being moved from its original position, there can be a situation, where multiple elements overlap each other. Fortunately, with z-index property, you can control which elements should be in the front and which in the back. We'll discuss this in more detail later.

Only relative position is not that useful as you do not usually want to offset an element without also moving all the elements around it. The main use cases for position relative are to either set the z-index of the element, or to be used as a container for absolute positioned elements which we will talk about next.

Absolute Position

The absolute position completely removes the element from the normal document flow. If you give an element position absolute all other elements will act as if the absolute positioned element doesn't even exist.

An element using position: absolute is positioned relative to the nearest ancestor. In other words, an element with position: absolute is positioned relative to its parent element.

If an element doesn’t have a parent element, it’s placed relative to its initial containing block. It can then be positioned by the values of top, right, bottom, and left.

Note : If we don’t specify helper properties, it’s positioned automatically to the starting point (top-left corner) of its parent element.

Example to illustrate Absolute Position :

We are using the following HTML markup:

<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>

And here’s the CSS we’re using:

.parent {
  position: relative;
}

.one {
  position: absolute;
  top: 0;
  right: 0;
}

However, here is how it will look on a webpage:

View original code in Codepen

By setting the blue parent element to a position of relative I am now forcing the absolute positioned child one element to be in the top right corner of the parent instead of the body. This combination of relative and absolute positions is incredibly common.

Fixed Position

The fixed position is a bit like absolute position in that it removes the element out of the normal flow, but fixed position elements are always positioned in the same place in the viewport (what’s visible on screen). This means that scrolling will not affect its position at all.

Example to illustrate Fixed Position :

We are using the following HTML markup:

<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">
       Two <br>
       Ha ha! Scrolling can't get rid of me!!
    </div>
    <div class="three">Three</div>
</div>

And here’s the CSS we’re using:

.two {
  position: fixed;
  top: 0;
  right: 0;
}

However, here is how it will look on a webpage:

View original code in Codepen

The pink fixed element will stay positioned at the top and right corner of the viewport. And if you scroll, the blue parent element and other child elements will scroll up normally, but the pink element will remain stuck to where we positioned it.

Tip: A fixed element must have a top or bottom position set. If it doesn’t, it will simply not exist on the page at all.

You have to be careful with fixed position usage. On a mobile device with a small screen, it can be a big deal if a large portion of your screen is always covered with a navigation bar or something similar. It dramatically reduces space for the actual content of your page and can significantly limit usability.

Sticky Position

The sticky position is a combination of both fixed and relative position and combines the best of them both.

An element with position sticky will act like a relative positioned element until the page scrolls to a point where the element hits the top, left, right, or bottom value specified. It will then act like a fixed position element and scroll with the page until the element gets to the end of its container.

In other words, elements set with position: sticky are positioned based on the user’s scroll position.

As of this writing, it is currently an experimental value, meaning it is not part of the official spec and is only partially adopted by select browsers. In other words, it’s probably not the best idea to use this on a live production website.

Example to illustrate Sticky Position :

We are using the following HTML markup:

<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">
       Two <br>
       I stick at the top <br><br>
       position: sticky <br>
       top: 0px;
    </div>
    <div class="three">Three</div>
</div>

And here’s the CSS we’re using:

.two {
  position: sticky;
  top: 0;
}

However, here is how it will look on a webpage:

View original code in Codepen

sticky position is the perfect position for navbars that scroll with the page, headings in long lists, and many other use cases.

Z-index

When working with position other than static, elements can easily appear in position, where they overlap each other.

This is where the z-index property comes in. When you have elements overlapping, we use z-index to stack them. It controls the position of your elements on the z-axis.

You can use z-index like this:

 z-index: 1;

The z-index gives you the ability to decide how the elements should overlap each other, in which order. If you give a higher z-index value, that particular element will appear closer to the viewer. In other words, it will appear on top of the other elements.

Example to illustrate Z-index:

We are using the following HTML markup:

<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">
       Two <br>
       I stick at the top <br><br>
       position: sticky <br>
       top: 0px;
    </div>
    <div class="three">Three</div>
</div>

And here’s the CSS we’re using:

.first{
  z-index: 3;
}

.second{
  z-index: 2;
}

.third{
  z-index: 1;
}

.four{
  /* No z-index */
}

.fifth{
  z-index: -1;
}

However, here is how it will look on a webpage:

View original code in Codepen

Summary

Let's sum it up. The position property allows you to determine how elements should be placed on the page.

You can define the exact location using top, bottom, right and left properties.

In case your elements overlap each other, you can change their order using z-index. The higher the index, the closer is the element to the user.

static

Default value
Positioning as usual, same as if you didn't specify the position

relative

The element is placed relative to its normal position on the page
The place occupied by the element is preserved at its original location

absolute

The element is removed from the normal flow and does not occupy space
The location is determined relative to the first parent set position (other than static)
If there is no such parent, it is determined relative to the whole page.

fixed

The element is removed from the normal flow and does not occupy space
The location is determined relative to the viewport
Elements keep their locations as you scroll

sticky

Elements are positioned relatively until you reach them by scrolling
Then the elements stick to one location, similar to fixed positioning
Not supported by all the browsers, you can check out the current support on CanIUse.com.

In closing

I hope that you’ve found this tutorial and code examples on CSS positioning helpful...! If you have any questions or feedback, feel free to leave a comment below.

If you found this article helpful, please like and share it 💙.

That's all for today! 😁 You reached the end of the article 😍.

Other Resources

Check out some of these resources for a more in-depth look into CSS Positions:

Want more..?

I write web development articles on my blog @dev.to/kadlagakash, and also post development-related content on the following platforms:

Twitter
LinkedIn

Mastering CSS & CSS3 Selectors in 2022.

Akash Kadlag — Fri, 12 Aug 2022 15:09:00 +0000

Save time searching for the CSS selectors.

This blog will look at the different types of CSS selectors and how we can use them to build efficient CSS code.

Prerequisite

To get the most out of this article, we need the following:

Basic understanding of HTML.
Visual studio code or any IDE of our choice to code along.

CSS Selectors

CSS selectors are the opening part of a CSS ruleset. CSS Selectors are used to targeting specific elements on the web page.

CSS selectors are case-sensitive. They must match element names and attribute values precisely.
For Example,
.logo class selector is not the same as .LOGO.

It is advisable to use small letters to avoid making mistakes.

The syntax for CSS Selector is:

selector {
   CSS-property: value;
}

Types of CSS Selectors

Basic Selectors
Combination Selectors
Attribute Selector
Pseudo Element Selector
Pseudo Class Selector

Basic CSS Selectors

Basic CSS selectors are the most common type of CSS selectors. They style specific elements on a website. In basic selectors, we have selectors such as:

Universal Selector

I refer to this selector as the god selector, the mother of all selectors, one selector to rule them all. That is how powerful it is.

The universal selector selects every tag on the page so we can style every tag or element with one rule.

The asterisk (*) character represents Universal selectors.

The syntax for Universal Selector is:

* {
  CSS-Property: value;
}

Example of Universal Selector:

* {
  margin: 0;
  padding: 0;
  outline: 0;
}

In the above ⬆️ example, we override the default styling applied by browsers.

Element Type Selector

Type Selectors are the most common basic CSS selectors. They select HTML elements based on the element name.

The Element type selector selects all instances of a tag or element on a page.

The syntax for Element Type Selector is:

element {
   property: value;
}

Example of Element Type Selector:

p {
  text-align: center;
  font-size: 20px; 
}

In the above ⬆️ example, all paragraph <p> elements will align to the center, and have a font size of 20px.

However, here is how it will look on a webpage:

View original code in Codepen.

Class Selector

The class selector is probably the most useful and versatile selector. The class selector is best used when you want to reuse a style for multiple elements.

To select elements with a specific class, write a period (.) character, followed by the class name.

The syntax for Class Selector is:

.class-name {
  property: value;
}

Example of Class Selector:

In the example below ⬇️ the <p> element has a class="text"

  <p class="text">Text goes here....</p>

To select the <p> element using the CSS class selector, we:

.text {
  text-align: center;
  font-size: 20px; 
  color: skyblue;
}

All HTML element with class="text" will align to the center, have blue text color and a font-size of 20px.

However, here is how it will look on a webpage:

View original code in Codepen.

ID Selector

ID attributes are specific to one element only. The ID selector identifies an element based on its ID attribute.

To select an element with a specific ID, write a hash (#) character, followed by the element's ID.

This selector is the most powerful in terms of CSS Specificity.

The syntax for ID Selector is:

#id-name {
  property: value;
}

Example of ID Selector:

In the example below ⬇️, the <p> element has an id="tagline"

<p id="tagline">Tagline goes here....</p>

To select the <p> element using the ID selector, we:

#tagline {
  text-align: center;
  font-size: 25px;
  font-style: italic; 
  color: red;
  letter-spacing: 2px;
}

In the example above ⬆️, the CSS rule will apply to the HTML element with id="tagline".

However, here is how it will look on a webpage:

View original code in Codepen.

Use ID selectors rarely and only on elements that need always to appear the same.

Combination CSS Selectors

Combination Selectors select elements based on a specific relationship between them. In Combination selectors, we have selectors such as:

Descendant Selector

Descendant selectors match all elements that are descendants of a specified element. Descendant selectors select the children, grandchildren, etc., when used.

It uses the white space as a separator between the elements.

The syntax for Descendant Selector is:

selector1 selector2 {
  property: value;
}

Example of Descendant Selector:

In the example below ⬇️, the <div> element has multiple nested <p> elements.

<div>
<p>Paragraph 1</p>
<p>
    <p>Paragraph 2.1</p>
    <p>Paragraph 2.2</p>
</p>
<p>Paragraph 3</p>
</div>

To select all <p> elements using the descendant selector, we use:

div p {
  text-align: center;
  font-size: 20px;
  font-style: italic; 
  color: teal;
}

In the example above ⬆️, the CSS rule will apply to the <p> child elements of <div>.

However, here is how it will look on a webpage:

View original code in Codepen.

Direct Child Selector

Direct Child Selector selects all the specified direct children of the parent.

Like a descendant selector, the direct child selector is for selecting child elements. Still, the main difference is the direct child selector will only select an element that is the direct child of the first parent selector.

We use the greater-than sign (>) character to represent a child selector.

The syntax for Direct Child Selector is:

Parent-selector > Child-selector {
  property: value;
}

Example of Direct Child Selector:

In the example below ⬇️, the <div> element has multiple nested <p> elements.

<div>
  <p>Paragraph 1</p>
  <span>
    <p>Paragraph 2.1</p>
    <p>Paragraph 2.2</p>
  </span>
  <p>Paragraph 3</p>
</div>

To select all <p> elements using the direct child selector, we use:

div > p {
  text-align: center;
  font-size: 20px;
  font-style: italic; 
  color: lightgreen;
}

In the example above ⬆️, the CSS rule will apply to the only <p> elements that are a direct child of <div>.

However, here is how it will look on a webpage:

View original code in Codepen.

Adjacent Sibling Selector

The Adjacent sibling selects an element directly after another specific element.

In other words, this selector selects the elements that follow and share the same parent. They must immediately follow each other.

The tilde (+) character represents adjacent sibling selectors.

The syntax for Adjacent Sibling Selector is:

first-sibling-selector + second-sibling-selector {
  property: value;
}

The second sibling element comes after the first sibling element and it's the targeted element. The targeted element is the element you intend to style.

Example of Adjacent Sibling Selector:

In the example below ⬇️ the <div> element has <p> elements and <ul> elements that consist of multiple <li> elements.

<div>
  <p>Paragraph 1</p>
  <ul>
    <li>Item 1</li>
    <li class="red">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  <p>Paragraph 2</p>
</div>

To select <li> that comes immediately after <li> element of class="red" using the general sibling selector, we use:

li.red + li {
  background: red;
}

In the example above ⬆️, the CSS rule will apply to the ltem 3.

However, here is how it will look on a webpage:

View original code in Codepen.

General Sibling Selector

General Sibling Selector selects all specified HTML elements that are placed after another specified element and they must be children of the same parent element.

In other words, this selector selects the elements that follow and share the same parent. It is not necessary that the second element immediately follows the first element.

The tilde (~) character represents general sibling selectors.

The syntax for General Sibling Selector is:

first-sibling-selector ~ second-sibling-selector {
  property: value;
}

The second sibling element comes after the first sibling element and it's the targeted element. The targeted element is the element you intend to style.

Example of General Sibling Selector:

In the example below ⬇️ the <div> element has <p> elements and <ul> elements that consist of multiple <li> elements.

<div>
  <p>Paragraph 1</p>
  <ul>
    <li>Item 1</li>
    <li class="red">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  <p>Paragraph 2</p>
</div>

To select all <li> that comes after <li> element of class="red" using the general sibling selector, we use:

li.red ~ li {
  background: red;
}

In the example above ⬆️, the CSS rule will apply to only ltem 3 and Item 4.

However, here is how it will look on a webpage:

View original code in Codepen.

Or Selector

Or selector allows us to select multiple elements with different selectors at once and style them. This is done by grouping them in a comma-separated list and CSS selects all the matching elements in the list.

It reduces the time of writing same code for multiple times for similar elements.

Note : When you group selectors in this way, If any selector is invalid the whole rule will be ignored.

The syntax for Or Selector is:

selector1, selector2, ... {
  property: value;
}

Example of Or Selector:

Suppose we need to apply border-radius to .btn-primary and .btn-secondary

Instead of doing this:

.btn-primary{ 
  border-radius : 3px;  
}
.btn-secondary{
  border-radius : 3px;
}

Use Or selector :

.btn-primary, .btn-secondary {
  border-radius : 3px;
}

In the example above ⬆️, the CSS rule will apply to both <button> elements having class of "btn-primary" and "btn-secondary".

However, here is how it will look on a webpage:

View original code in Codepen.

And Selector

Sometimes we want to use specific elements for styling. Here, the selector comes into action.

Suppose we have <p> element and <a> element having the same class = "img" and we have to specify that a class should affect only an HTML <p> element, then we use And Selector.

And Selector Select elements that match all the selector combinations

Example of ID Selector:

In the example below ⬇️ the <p> and <a> element has a class="img"

<img src="./images/image.jpg" class= "img"/>
<p class="img">Description of Image....</p>
<a href="http://www.example.com/image.jpg" download class="img">Download</a>

For example, to select an element with a specific class, write a period (.), followed by the element's class name.

p.img {
  text-align: center;
  font-size: 20px;
  color: green;
}

In the example above ⬆️, the CSS rule will apply to the <p> element with class="img".

However, here is how it will look on a webpage:

View original code in Codepen.

Attribute CSS Selectors

Attribute selectors select all elements that have a given attribute or attribute value. We include attributes in an HTML element's opening tag. In Attribute selectors, we have selectors such as:

Has Attribute

Has attribute selector select elements with a specified attribute.

The syntax for Has Attribute Selector is:

selector[attribute] {
  property: value;
}

Example of Has Attribute Selector:

In the example below ⬇️ the <a> element has attributes like href and target.

<a href="#" target="_blank">Click Here</a>

Styling the above ⬆️ HTML <a> element:

a[target]{
  font-size: 20px;
  color: yellow;
  text-decoration: none;
}

In the example above ⬆️, the CSS rule will apply to the <a> element which has the attribute of the target.

However, here is how it will look on a webpage:

View original code in Codepen.

Exact Attribute

Exact attribute selector selects elements with a specified attribute and value.

The equals (=) character represents the Exact attribute selectors.

The syntax for Exact Attribute Selector is:

selector[attribute="value"] {
  property: value;
}

Example of Exact Attribute Selector:

In the example below ⬇️, the <a> element has attributes like href and target.

<a href="https://google.com" target="_blank">Google</a>

Styling the above ⬆️ HTML <a> element:

a[href="https://google.com"]{
  font-size: 20px;
  color: yellow;
  text-decoration: none;
}

In the example above ⬆️, the CSS rule will apply to the <a> element which has the attribute of href="https://google.com".

However, here is how it will look on a webpage:

View original code in Codepen.

Begins With Attribute

Begins with attribute selector select elements whose attribute value begins with a specific value.

The circumflex accent (^) character represents Begins with attribute selector.

The syntax for Begins with Attribute Selector is:

selector[attribute^="value"] {
  property: value;
}

Example of Begins with Attribute Selector:

In the example below ⬇️ the <a> element has attributes like href and target.

<a href="https://google.com" target="_blank">Google</a>

Styling the above ⬆️ HTML <a> element:

a[href^="https://"]{
  font-size: 20px;
  color: yellow;
  text-decoration: none;
}

In the example above ⬆️, the CSS rule will apply to the <a> element which has the attribute of href begins with "https://".

However, here is how it will look on a webpage:

View original code in Codepen.

End With Attribute

Ends with attribute selector select elements whose attribute value ends with a specific value.

The dollar sign ($) character represents Ends with attribute selector.

The syntax for Ends with Attribute Selector is:

selector[attribute$="value"] {
  property: value;
}

Example of Ends with Attribute Selector:

In the example below ⬇️, the <a> element has attributes like href and target.

<a href="http://www.example.com/image.jpg" download" target="_blank">Get Stunning Image</a>

Styling the above ⬆️ HTML <a> element:

a[href$=".jpg"]{
  font-size: 20px;
  color: yellow;
  text-decoration: none;
}

In the example above ⬆️, the CSS rule will apply to the <a> element which has the attribute of href ends with ".jpg".

However, here is how it will look on a webpage:

View original code in Codepen.

Substring Attribute

Substring Attribute Selector selects elements whose attribute value contains a specified value.

The asterisk (*) character represents the substring attribute selector.

The syntax for Substring Attribute Selector is:

selector[attribute*="value"] {
  property: value;
}

Example of Substring Attribute Selector:

In the example below ⬇️ the <div> element has an attribute of data-red.

  <div data-red="1234">This is Div</div>

Styling the above ⬆️ HTML <div> element:

div[data-red*="23"]{
  font-size: 20px;
  color: lightgreen;
  text-decoration: none;
}

In the example above ⬆️, the CSS rule will apply to the <div> element which has the attribute of data-red that contains "23".

However, here is how it will look on a webpage:

View original code in Codepen.

Pseudo Element Selectors

1. Textual Pseudo Elements

First-Letter Selector The first-letter selector applies a style to the first letter of the element.

Note : The ::first-letter pseudo-element work only for block elements.

The syntax for First-Letter Selector is:

selector::first-letter {
  property: value;
}

Example of First-Letter Selector:

In the example below ⬇️, there is a sample paragraph in the <div> element.

<div class="pseudo-element">
  <p>This is Sample Text.</p>
</div>

Styling the above ⬆️ HTML <p> element:

p::first-letter{
  font-size: 50px;
  font-weight: 900;
  padding: 0 3px;
}

In the example above ⬆️, the CSS rule will apply to the first letter of the <p> element.

However, here is how it will look on a webpage:

View original code in Codepen.

First-Line Selector

The first-line selector applies a style to the first line of the element.

Note : The ::first-line pseudo-element work only for block elements.

The syntax for First-Line Selector is:

selector::first-line {
  property: value;
}

Example of First-Line Selector:

In the example below ⬇️, there is a sample paragraph in the <div> element.

<div class="pseudo-element">
  <p>
    This is Sample Text.<br> 
    Here we are demonstrating usage of pseudo elements
  </p>
</div>

Styling the above ⬆️ HTML <p> element:

p::first-line{
  background-color: orange;
  color: black;
}

In the example above ⬆️, the CSS rule will apply to the first line of <p> element.

However, here is how it will look on a webpage:

View original code in Codepen.

2. Generated Content Pseudo Elements

Before Selector

The Before Selector adds content before the HTML element.

Note : When using the ::before pseudo-element, we must use the content property to make our styles visible.

The syntax for Before Selector is:

selector::before {
  property: value;
}

Example of Before Selector:

In the example below ⬇️ there is sample paragraph in <div> element.

<div class="pseudo-element">
  <p> This is Sample Text.</p>
</div>

Styling the above ⬆️ HTML


 element:



```css
p::before{
  content: "content";
  background: red;
}

In the example above ⬆️, the CSS rule will add content with red background before


 element.

However, here is how it will look on a webpage:





View original code in [Codepen](https://codepen.io/KadlagAkash/pen/yLKowJm). 

- **After Selector**

The After Selector adds content after the HTML element. 

>  **Note** : When using the ::after pseudo-element, we must use the content property to make our styles visible.

**The syntax for After Selector is:**


```css
selector::after {
property: value;
  }

Example of After Selector:

In the example below ⬇️, there is a sample paragraph in the <div> element.

<div class="pseudo-element">
  <p>This is Sample Text. </p>
</div>

Styling the above ⬆️ HTML <p> element:

p::after{
  content: "content";
  background: blue;
}

In the example above ⬆️, the CSS rule will add content with blue background after the <p> element.

However, here is how it will look on a webpage:

View original code in Codepen.

Pseudo Class Selectors

1. Pseudo Class State Selectors

Hover Selector

The Hover Selector selects elements that are hovered by the mouse.

:hover works when the user moves their cursor over an element but does not select it.

The syntax for Hover Selector is:

selector:hover {
  property: value;
}

Example of Hover Selector:

In the example below ⬇️, there is a sample paragraph in the <a> element.

<p>Hover on this link: <a href="#">click</a></p>

Styling the above ⬆️ HTML <a> element:

a:hover{
  color: black;
  background: orange;
}

In the example above ⬆️, the CSS rule will apply to the <a> element when we hover over it.

However, here is how it will look on a webpage:

View original code in Codepen.

Focus Selector

The Focus Selector selects an element that is being focused on by the user. "focused on by the user" means it accepts the keyboard or any other user input.

It works on user input elements used in forms and is triggered when the user clicks on it.

The syntax for Focus Selector is:

selector:focus {
  property: value;
}

Example of focus Selector:

In the example below ⬇️, there is <input> element.

<input type="text"  placeholder="focus/click on me I will be orange"/>

Styling the above ⬆️ HTML <input> element:

input:focus  {
  background: orange;
}

In the example above ⬆️, the CSS rule will apply to <input> element when we focus on it.

However, here is how it will look on a webpage:

View original code in Codepen

Required Selector

The Required Selector selects inputs that are required.

Note : The :required selector only applies to the form elements: input, select and textarea.

The syntax for Required Selector is:

selector:required {
  property: value;
}

Example of Required Selector:

In the example below ⬇️, there is <input> element.

<input type="text" required placeholder="Required Field"/>

Styling the above ⬆️ HTML <input> element:

input:required {
  color: red;
}

In the example above ⬆️, the CSS rule will apply to the <input> element which is required to fill.

However, here is how it will look on a webpage:

View original code in Codepen.

Checked Selector

The Checked Selector selects checkboxes/radio buttons that are checked.

The checked selector matches every checked element (only for radio buttons and checkboxes) and element.

The syntax for Checked Selector is:

selector:checked {
  property: value;
}

Example of Checked Selector:

In the example below ⬇️, there is <input> element.

<input type="radio" checked="checked" value="male" name="gender"/> Male<br/>
<input type="radio" value="female" name="gender"/> Female<br/>
<input type="checkbox" checked="checked" value="Bike"/> I have a bike<br/>
<input type="checkbox" value="Car"/> I have a car

Styling the above ⬆️ HTML <input> element:

input:checked {
  height: 30px;
  width: 30px;
}

In the example above ⬆️, the CSS rule will apply to <input> element which are checked.

However, here is how it will look on a webpage:

View original code in Codepen.

*Disabled Selector *

The Disabled Selector selects inputs that are disabled.

The syntax for Disabled Selector is:

selector:disabled {
  property: value;
}

Example of Disabled Selector:

In the example below ⬇️ there is <input> element.

<form action="">
  First name: <input type="text" value="Mickey"><br>
  Last name: <input type="text" value="Mouse"><br>
  Country: <input type="text" disabled="disabled"   value="Disneyland">
</form>

Styling the above ⬆️ HTML <input> element:

input[type=text]:disabled {
  background: #dddddd;
}

In the example above ⬆️, the CSS rule will apply to <input> element of type="text" which are disabled.

However, here is how it will look on a webpage:

View original code in Codepen.

2. Pseudo Class Position Selectors

First-Child Selector

The First-Child Selector applies a style to the element's first child.

The syntax for First-Child Selector is:

:first-child {
  property: value;
}

Example of First-Child Selector:

In the example below ⬇️ there is <li> element.

<ul>
  <li>This is first child</li>
  <li>This is second child</li>
  <li>This is third child</li>
</ul>

Styling the above ⬆️ HTML <li> element:

ul li:first-child {
  color: red;
  font-weight: bold;
}

In the example above ⬆️, the CSS rule will apply to the first element among a sibling group of <li> elements.

However, here is how it will look on a webpage:

View original code in Codepen.

Last-Child Selector

The Last-Child Selector applies a style to the element's last child.

The syntax for Last-Child Selector is:

:last-child {
  property: value;
}

Example of Last-Child Selector:

In the example below ⬇️ there is <li> element.

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Styling the above ⬆️ HTML <li> element:

ul li:last-child {
  color: red;
  font-weight: bold;
}

In the example above ⬆️, the CSS rule will apply to last element among a group of sibling <li> element i.e. Item 4 and Item 2.2

However, here is how it will look on a webpage:

View original code in Codepen.

Nth-Child Selector

The Nth-Child Selector matches elements based on their position among a group of siblings.

The syntax for Nth-Child Selector is:

:nth-child(expression) {
  property: value;
}

Keyword values

odd : Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc.

even : Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc.

Functional notation :

<An+B> Represents elements in a list whose indices match those found in a custom pattern of numbers, defined by An+B, where:
A is an integer step size,
B is an integer offset,
n is all non-negative integers, starting from 0.

It can be read as the An+Bth element of a list.

Example of Last-Child Selector:

tr:nth-child(odd) or tr:nth-child(2n+1)

Represents the odd rows of an HTML table: 1, 3, 5, etc.

tr:nth-child(even) or tr:nth-child(2n)

Represents the even rows of an HTML table: 2, 4, 6, etc.

In the example below ⬇️ there is <li> element.

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

Styling the above ⬆️ HTML <li> element:

ul li:nth-child(2n+1) {
  color: red;
  font-weight: bold;
}

In the example above ⬆️, the CSS rule will apply to Item 1, Item 3, Item 3.1 and Item 3.3

However, here is how it will look on a webpage:

View original code in Codepen.

Nth-Last-Child Selector

The Nth-Last-Child Selector matches elements based on their position among a group of siblings, counting from the end.

The syntax for Nth-Last-Child Selector is:

:nth-last-child(expression) {
  property: value;
}

Keyword values

odd : Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc., counting from the end.

even : Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc., counting from the end.

Functional notation :

<An+B> Represents elements whose numeric position in a series of siblings matches the pattern An+B, for every positive integer or zero value of n. The index of the first element, counting from the end, is 1. The values A and B must both be <integer>.

Example of Last-Child Selector:

tr:nth-child(odd) or tr:nth-child(2n+1)

Represents the odd rows of an HTML table: 1, 3, 5, etc., counting from the end.

tr:nth-child(even) or tr:nth-child(2n)

Represents the even rows of an HTML table: 2, 4, 6, etc., counting from the end.

In the example below ⬇️, there is <li> element.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Styling the above ⬆️ HTML <li> element:

ul li:nth-last-child(2n+1) {
  color: red;
  font-weight: bold;
}

In the example above ⬆️, the CSS rule will apply to Item 4, Item 2, Item 4.3 and Item 4.1

However, here is how it will look on a webpage:

View original code in Codepen.

Only-Child Selector

The Only-Child selector applies a style to an element if it is the only element within a parent.

The syntax for Only-Child Selector is:

:only-child {
  property: value;
}

Example of Only-Child Selector:

In the example below ⬇️, there is <li> element.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 
    <ul>
      <li>Item 3.1</li>
    </ul>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Styling the above ⬆️ HTML <li> element:

ul li:only-child {
  background: red;
  color: white;
  font-weight: bold;
}

In the example above ⬆️, the CSS rule will apply to Item 3.1 cause is the only child.

However, here is how it will look on a webpage:

View original code in Codepen.

First of Type Selector

The First of Type selector represents the first element of its type among a group of sibling elements.

The syntax for First of Type Selector is:

:first-of-type {
  property: value;
}

Example of First of Type Selector:

In the example below ⬇️, there is one <h2> and two <p> elements.

<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

Styling the above ⬆️ first paragraph:

p:first-of-type {
  color: red;
  font-style: italic;
}

In the example above ⬆️, the CSS rule will apply to 'Paragraph 1' cause is the first of the <p> type.

However, here is how it will look on a webpage:

View original code in Codepen.

Checkout The Difference Between :first-child and :first-of-type

Last of Type Selector

The Last of Type selector represents the last element of its type among a group of sibling elements.

The syntax for Last of Type Selector is:

:last-of-type {
  property: value;
}

Example of Last of Type Selector:

In the example below ⬇️ there is one <h2> and two <p> element.

<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

Styling the above ⬆️ last paragraph:

p:last-of-type {
  color: blue;
  font-style: italic;
}

In the example above ⬆️, the CSS rule will apply to 'Paragraph 2' cause is the last of the <p> type.

However, here is how it will look on a webpage:

View original code in Codepen.

Nth of Type Selector

The Nth of the Type selector matches elements based on their position among siblings of the same type (tag name).

The syntax for Nth of Type Selector is:

:nth-of-type(expression) {
  property: value;
}

Example of Nth of Type Selector:

In the example below ⬇️, there are multiple <div> and <p> elements.

<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p>2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p>3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>

Styling the above ⬆️ paragraphs:

/* Odd paragraphs */
p:nth-of-type(2n+1) {
  color: skyblue;
}

/* Even paragraphs */
p:nth-of-type(2n) {
  color: orange;
}

In the example above ⬆️, the CSS rule will apply skyblue color to 'Paragraph 1' & 'Paragraph 3' and orange color to 'Paragraph 2' & 'Paragraph 4'.

However, here is how it will look on a webpage:

View original code in Codepen.

Checkout The Difference Between :nth-child and :nth-of-type

Nth Last of Type Selector

The Nth Last of Type selector matches elements based on their position among siblings of the same type (tag name), counting from the end.

The syntax for Nth Last of Type Selector is:

:nth-last-of-type(expression) {
  property: value;
 }

Example of Nth Last of Type Selector:

In the example below ⬇️ there are multiple <div> and <p> elements.

<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p>2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p>3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>

Styling the above ⬆️ paragraphs:

/* Odd paragraphs */
p:nth-last-of-type(2n+1) {
  color: skyblue;
}

/* Even paragraphs */
p:nth-last-of-type(2n) {
  color: orange;
}

In the example above ⬆️, the CSS rule will apply skyblue color to 'Paragraph 4' & 'Paragraph 2' and orange color to 'Paragraph 3' & 'Paragraph 1'.

However, here is how it will look on a webpage:

View original code in Codepen.

Only of the Type Selector

The Only of Type selector represents an element that has no siblings of the same type.

The syntax for Only of Type Selector is:

:only-of-type {
  property: value;
}

Example of Only of Type Selector:

In the example below ⬇️, there are multiple elements in the <main> element.

<main>
  <div>I am `div` #1.</div>
  <p>I am the only `p` among my siblings.</p>
  <div>I am `div` #2.</div>
  <div>I am `div` #3.
    <i>I am the only `i` child.</i>
    <em>I am `em` #1.</em>
    <em>I am `em` #2.</em>
  </div>
</main>

Styling the above ⬆️ elements with no siblings of the same type:

main :only-of-type {
  color: red;
}

In the example above ⬆️, the CSS rule will apply red color to <p> and <i> elements.

However, here is how it will look on a webpage:

View original code in Codepen.

Not Selector

The Not selector represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

The syntax for Only of Type Not Selector is:

:not(<selector-list>){
  property: value;
}

Example of Not Selector:

In the example below ⬇️ there are two <p> elements.

<p>I am a normal paragraph.</p>
<p class="fancy">I am so very fancy paragraph..!</p>

Styling the above ⬆️ <p> element with no fancy class:

.fancy {
  background: orange;
  color: black;
  text-shadow: 2px 2px 3px red;
  font-style: italic;
}

p:not(.fancy) {
  font-style: normal;
  font-weight: bold;
}

In the example above ⬆️, the CSS rule will not apply font-weight of bold to <p> element with class="fancy".

However, here is how it will look on a webpage:

View original code in Codepen.

In closing

I hope that you’ve found this tutorial and code examples on CSS Selectors helpful...! If you have any questions or feedback, feel free to leave a comment below.

If you found this article helpful, please like and share it 💙.

That's all for today! 😁 You reached the end of the article 😍

Other Resources

Check out some of these resources for a more in-depth look into CSS selectors :

Want more..?

I write web development articles on my blog @dev.to/kadlagakash, and also post development-related content on the following platforms:

Twitter
LinkedIn