0
0
0
Everything You need to know about Pseudo Classes in CSS image
HTMLCSS
createor-profile-picture
Spurgeon Gnan Prakash Tara
admin

Dec 17, 2024

Everything You need to know about Pseudo Classes in CSS

CSS For EveryOne
1.Welcome to 'CSS for Everyone' - where you learn all about CSS from Beginning to Advanced
2.Introducing CSS - What is CSS?
3.How to ADD (or) CONNECT our CSS with HTML
4.Mastering CSS Selectors: Your Complete Guide to Targeting HTML Elements for frontend web developers
5.Mastering CSS Combinators: An Efficient way of Selecting HTML Elements for Frontend Web Developers
11.Learn CSS Fonts and visualize your website text like a PRO
12.Everything You need to know about Pseudo Classes in CSS
13.Learn CSS display property and Understand the document flow of elements in HTML
14.Mastering CSS Positioning: A Comprehensive Guide to Layout and Element Placement
15.Mastering CSS Overflow: Understanding the Hidden, Scroll, and Auto Magic!

Welcome to WebDevParadise!

Hello everyone, and welcome to WebDevParadise—the ultimate blogging community for web developers!

Our goal is to foster a supportive and inspiring environment for web developers at every level. Whether you're just starting your journey or are a seasoned professional eager to share your knowledge, you're in the right place.

Today's Blog: Exploring CSS Pseudo-Classes

In this post, we'll dive deep into CSS pseudo-classes. We'll start with the basics, covering their syntax and purpose, and then move on to explore a variety of commonly used pseudo-classes. These include:

  • :hover
  • :active
  • :focus
  • :nth-child
  • :first-child
  • And many more!

By the end of this post, you'll have a solid understanding of how to use pseudo-classes to create dynamic and interactive web designs. Let's get started!

Topics Covered in this article

What are Pseudo Classes and why we need them?

In the past, we used selectors and combinators to effectively select elements in our HTML and style them. While that’s great, there’s even more we can do. For instance, users interact with your website using buttons, links, and form elements like inputs or checkboxes. To make these interactions visually engaging, we use pseudo-classes.

Before CSS3, developers relied on JavaScript to visualize these interactions. Now, with CSS3, we can achieve this directly using CSS.

Pseudo-classes are a powerful CSS feature that allows us to style elements based on their state or structural position in the document tree.

Kinds of Pseudo-Classes

There are two main categories of pseudo-classes:

  1. State Selector Pseudo-Classes: Based on the element's state (e.g., :hover, :focus).
  2. Structural Pseudo-Classes: Based on the element's position within the DOM (e.g., :first-child, :nth-child).

We’ll explore these categories in detail, but first, let’s set up our project.

Starter Code

To get started, create a folder named pseudoclasses on your computer. Inside this folder, create the following files:

  1. A CSS file named styles.css (leave it empty for now).
  2. An HTML file named index.html with the following content:
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="login-form">
      <h1>Login Form</h1>
      <div>
        <input
          type="email"
          name="email"
          id="email"
          class="email"
          placeholder="Enter your email"
          required
        />
      </div>
      <div>
        <input
          type="password"
          name="password"
          id="password"
          class="password"
          placeholder="Enter your Password"
          required
        />
      </div>
      <div>
        <input
          type="text"
          name="name"
          id="name"
          class="name"
          placeholder="Enter your Name"
          disabled
        />
      </div>
      <button class="btn btn-submit">Login</button>
      <a href="#1" class="signup-link">Don't have an account?</a>
    </section>
    <section class="portfolio">
      <div>
        <h1>Skills</h1>
        <ul>
          <li>HTML(li element 1)</li>
          <li>CSS(li element 2)</li>
          <li>Javascript(li element 3)</li>
          <li>Java(li element 4)</li>
          <li>Python(li element 5)</li>
        </ul>
      </div>
      <div>
        <h1>Social</h1>
        <ul>
          <div>Social(div element 1)</div>
          <li>Twitter(li element 1)</li>
          <li>Gmail(li element 2)</li>
          <li>Facebook(li element 3)</li>
          <li>Instagram(li element 4)</li>
          <li>Whatsapp(li element 5)</li>
          <br>
          <ul>
            <li>Nested li element</li>
          </ul>
        </div>
      </h1>
    </section>
    <section class="social"></section>
  </body>
</html>

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
71 
72 
73 
74
  1. Now Paste the below starter CSS code in your styles.css file
css
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  font-family: sans-serif;
}

.login-form,
.portfolio {
  width: 50%;
  margin: 0 auto;
  padding: 2rem 1rem;
  background-color: hsl(115, 25%, 69%);
  border-radius: 5px;
  margin-top: 1rem;
}

.login-form h1,
.portfolio h1 {
  text-align: center;
  margin-bottom: 1rem;
}

.email,
.password,
.name {
  width: 70%;
  margin-left: 7rem;
  margin-bottom: 1rem;
  padding: 0.5rem;
  font-size: 1.2rem;
  outline: none;
  border-radius: 5px;
}

.btn {
  background: none;
  border: none;
}

.btn-submit {
  margin-left: 7rem;
  background-color: cornflowerblue;
  padding: 0.5rem 1rem;
  font-weight: bold;
}

.signup-link {
  margin-left: 16.5rem;
}

li {
  padding: 0.3rem;
  list-style: none;
  background-color: rgb(95, 158, 160);
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: 1.3rem;
}

ul div {
  text-align: center;
}

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67

Now Save the file and open the html file in the browser.

Starter Code Preview

The HTML and CSS are now connected, and the styles have been successfully applied.

The starter HTML file has two sections. The first section contains a login form, and the second section has a portfolio list that includes skills and social media links. If anything in the HTML is unclear, you can check out W3Schools or MDN Docs for more information.

The starter CSS file provides basic styles for these two sections. These styles are based on properties we've already learned. You can apply these styles step by step. While there are ways to improve the styles, the ones used here focus on the concepts we've covered so far. If you're unsure about anything, you can refer to the previous posts in this series.

Now, let's dive into learning about Pseudo Classes!

1. State Selector Pseudo Classes

Let’s start with the first section. It has a button with the class .btn-submit. We will use this button to explore some pseudo classes.

Pseudo Class - :hover

The :hover pseudo-class allows us to select an element when we hover (place the mouse) over it.

css
selector:pseudo-class {
     /* Your Styles goes here */
}

1 
2 
3

Now let's use our :hover selector.

In your CSS file add the below styles on button on hover state.

css
.btn-submit:hover {
  background-color: #f7a400;
  cursor: pointer;
}

1 
2 
3 
4

Now Save the file and reload the browser.

Pseudo class hover

As you can see, the background color changes to #f7a400 when you hover over the button, and the mouse cursor changes from the usual arrow to a pointer. Don't worry if you can't see the pointer in the screenshot above — it will show up when you actually hover over the button.

Pseudo Class - :focus

The :focus pseudo-class applies when an element (like a button or input field) is clicked or when you navigate to it using the Tab key.

Now, let's add the following styles to the button with the class .btn-submit.

css
.btn-submit:focus {
  background-color: yellow;
}

1 
2 
3

Now, save the file and reload the browser.

Pseudo Class focus

As you can see, the button's color changes to yellow after we click on it or tab to it. The button gains focus when clicked and loses focus when you click outside of it. That’s why the color changes back to cornflowerblue when you click outside the button.

Pseudo Class - :disabled

A disabled state is when a developer makes an element disabled, either by default or programmatically. In our code, you can see that the name input field has the disabled attribute set in the HTML. Now, let's explore the :disabled pseudo-class on that element.

Add the following styles to the name input field to style it in the disabled state in your styles.css file.

css
input:disabled {
  background-color: darkgreen;
}

1 
2 
3

Now save the file and reload the browser.

Pseudo class Disabled

As you can see, the background color is applied successully on the input with disabled state on it.

Pseudo Class - :required

A required state is when we mark a form field (like an input or checkbox) as required when creating the element.

In our HTML, you’ll notice that the email and password input fields have the required attribute.

Now, let's add the following styles to style all the input elements with the required attribute.

css
input:required {
  border: 2px solid tomato;
}

1 
2 
3

Now save the file and reload the browser.

Pseudo class required

As you can see, border added to the two input elements(email, password) with required attribute on them.

In our HTML file, we have an anchor tag for links. Links also have some additional Pseudo classes. Let's explore them.

The link state will be available on anchor tags in html. By default all the links have the following styles.

css
a:link {
    text-decoration: underline;
    color: blue;
}

1 
2 
3 
4

This default styles is the reason why all the anchor tags have blue color and the text is underlined. we can override those above default styles with our own styles as shown below.

In your CSS file add the below styles to select all the links with state :link

css
a:link {
    color: crimson;
  text-decoration: none;
}

1 
2 
3 
4

Now save the file and reload the browser.

Pseudo class link usage

As you can see, the dafault styles was modified with our new styles.

Pseudo Class - :visited

On links, Visited is the state when we visit a particular link by clicking on it. Now lets use this.

In your CSS file add the below styles to use :visited pseudo class.

css
a:visited {
    color: darkcyan;
}

1 
2 
3

Pseudo Class Visited Usage

As you can see, the link color turned into darkcyan when we visited the link by clicking on it.

Pseudo Class - :hover

Just like buttons and form fields(inputs, etc.,), Links also have hover state on it.

Usage of hover on links is as follows:

css
a:hover {
    /* Your Styles goes here */
}

1 
2 
3

Pseudo Class - :active

Pseudo class active is some what tricky. A link will be in active state right when you are clicking on the link. The momemnt when you release the mouse after clicking, the link state will get's changed from :active to :visited.

In your CSS file add the below styles to use :active pseudo class.

css
a:active {
  color: yellow;
}

1 
2 
3

Pseudo Class active usage

As you can see color yellow gets applied to the link. It's a bit tricky to observe this state. Since the state of the link get's changed to :visited when we release the mouse. So what you can do is click and hold the mouse for sometime inorder to observe the :active state.

These are more than enough state selector pseudo classes, that we are gonna use in our daily development of web apps. So now let's go ahead and discuss Structural Pseudo Classes

Structural Pseudo Classes

Using Structural Pseudo Classes, We can style the elements based on their position structure. These Structural Pseudo classes is based on the parent tag and the postion of element in related to parent tag. You will understand it better once you complete reading this blog post. These are a bit tricky so read the section once again to understand it. So, let's continue.

Pseudo class - :first-child

:first-child pseudo class is used to select the element which is located as a first child of it's parent. In our HTML file, Now let's move onto our second section. Which is a portfolio section. Within that section we have two divs one for skills and one for social. Each of this div have a ul tag. for each ul tag there are multiple li tags as cildren to it. So what if we want to select the li tags that are first-child of its parent ul tags. So in that scenario we use structural pseudo class :first-child. If this is confusing, don't panic. See the below example.

Let's add the below styles in our css file inorder to select all the li tags that are first-child of their parents.

css
li:first-child {
  background-color: brown;
  color: white;
}

1 
2 
3 
4

Here we are selecting all the li tags that are first child to their parent. No matter what the parent element is. All that the browser check is weather this selected li element is first child to it's parent or not.

Now save the file and reload the browser.

Pseudo class first-child

As you can see, In out Second section, In the first div tag(Skills div) list items, Our first li tag(HTML) get's selected but the in the second div tag(social), the first li tag(Twitter) was not get selected. Why because the li tag(Twitter) in second div was not the first direct child to its parent. It is the second direct child to it's parent. And also if you observe, In the second div, there is a nested ul. Where it consists of one li tag(Nested li element) which is the first-direct child. so this nested list item's li tag is also get's selected.

Pseudo class - :last-child

As the name suggests, this :last-child pseudo class is used to select an element which is last child to it's parent.

Comment the above first-child code and Add the below code to your CSS file, to select all the li tags which are the last child of it's parent

css
/* li:first-child {
  background-color: brown;
  color: white;
} */

li:last-child {
  background-color: brown;
  color: white;
}

1 
2 
3 
4 
5 
6 
7 
8 
9

Now save the file and reload the browser.

Pseudo Class last-child

As you can see in our Skills section, the last li(Python) get's selected. And in our Social section the last li(whatsapp) not get selected because the nested ul tag is the last child here. And the last li tag in this nested ul tag is also gets selected and our color white and background color brown gets applied successfully.

Pseudo class - :first-of-type

This first of type will select the first element of its type within a parent element. In our Previous (:first-child) example, in Social section, the first li tag(Twitter) is not gets selected. Since it is not the first child. Here in :first-of-type, this li(Twitter) will gets selected. Since the li(Twitter) is the first of its element type(li) in that social section.

Comment the above :last-child styles and add the below styles to your CSS file.

css
/* li:first-child {
  background-color: brown;
  color: white;
} */

/* li:last-child {
  background-color: brown;
  color: white;
} */

li:first-of-type {
  background-color: brown;
  color: white;
}

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14

Now save the file, And reload the browser.

Pseudo Class first-of-type

As you can see, the first li tags irrespective whether it is first child or not gets selected here.

Pseudo class - :last-of-type

Just like first-of-type, last-of-type is also the same. It will select the last of its type.

Comment the above "first-of-type" styles and add these styles to your CSS file.

css
/* li:first-child {
  background-color: brown;
  color: white;
} */

/* li:last-child {
  background-color: brown;
  color: white;
} */

/* li:first-of-type {
  background-color: brown;
  color: white;
} */

li:last-of-type {
  background-color: brown;
  color: white;
}

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19

Now save the file and reload the browser.

Pseudo Class Last of type

As you can see all the last elements of type li tags were gets selected and the styles were added successfully

Pseudo class - :only-child

Pseudo class :only-child will select the element if it is the only child available in its parent.

Comment the above last-of-type styles and add these styles as shown below

css
/* li:first-child {
  background-color: brown;
  color: white;
} */

/* li:last-child {
  background-color: brown;
  color: white;
} */

/* li:first-of-type {
  background-color: brown;
  color: white;
} */

/* li:last-of-type {
  background-color: brown;
  color: white;
} */

li:only-child {
  background-color: brown;
  color: white;
}

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24

Now Save the file and reload the browser.

Pseudo class only-child

As you can see, the nested ul tag consists of only li tag gets selected and the styles were applied successfully.

Pseudo class - :nth-child()

Not only first and last, we can also select the in between children like the third child using nth-child(3) pseudo selector.

Comment the "only-child" styles and add the following styles as shown below

css
/* li:first-child {
  background-color: brown;
  color: white;
} */

/* li:last-child {
  background-color: brown;
  color: white;
} */

/* li:first-of-type {
  background-color: brown;
  color: white;
} */

/* li:last-of-type {
  background-color: brown;
  color: white;
} */

/* li:only-child {
  background-color: brown;
  color: white;
} */

li:nth-child(3) {
  background-color: brown;
  color: white;
}

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29

Now save the file and reload the browser.

Pseudo classes nth-child

As you can see 3rd elements in both the skills and social were selected and the style was applied successfully

Pseudo class - :nth-child(even)

Not only the nth element we can also select all the li tags that are located in even position(2,4,6,8,..) with respect to their parents.

Comment the (nth-child(3)) styles and add the below styles in your CSS file.

css
/* li:first-child {
  background-color: brown;
  color: white;
} */

/* li:last-child {
  background-color: brown;
  color: white;
} */

/* li:first-of-type {
  background-color: brown;
  color: white;
} */

/* li:last-of-type {
  background-color: brown;
  color: white;
} */

/* li:only-child {
  background-color: brown;
  color: white;
} */

/* li:nth-child(3) {
  background-color: brown;
  color: white;
} */

li:nth-child(even) {
  background-color: brown;
  color: white;
}

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34

Now save the file and reload the browser.

Pseudo class nth-child(even)

As you can see all the li tags at even position(2,4,6,8...) gets selected and styles were applied successfully.

Pseudo class - :nth-child(odd)

Not only even you can also select the elements which are odd(1,3,5,...)

Comment the above even styles and add the below styles in your CSS file.

css
/* li:first-child {
  background-color: brown;
  color: white;
} */

/* li:last-child {
  background-color: brown;
  color: white;
} */

/* li:first-of-type {
  background-color: brown;
  color: white;
} */

/* li:last-of-type {
  background-color: brown;
  color: white;
} */

/* li:only-child {
  background-color: brown;
  color: white;
} */

/* li:nth-child(3) {
  background-color: brown;
  color: white;
} */

/* li:nth-child(even) {
  background-color: brown;
  color: white;
} */

li:nth-child(odd) {
  background-color: brown;
  color: white;
}

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39

Now save the file and reload the browser.

Pseudo class nth-child(odd)

As you can see all the odd li's(1,3,5,7,...) gets selected.

Pseudo class - :nth-child(formulae)

We Can even pass a formulae to select the elements based on formulae. Lets write a formulae to achieve :nth-child(even) as :nth-child(2n).

Now how does this formulae works? Just Plugin the numbers from 0 to infinity until you run out of elements as shown below.

2(n) => 2(0) => 0 => Dont Consider this 2(n) => 2(1) => 2 2(n) => 2(2) => 4 2(n) => 2(3) => 6 2(n) => 2(4) => 8 . . . Until you run out of elements. So we got our formulae to select even elements that select elements located at 2,4,6,8,...

In your CSS file, Comment the above :nth-child(odd) styles and add the below styles.

css
/* li:first-child {
  background-color: brown;
  color: white;
} */

/* li:last-child {
  background-color: brown;
  color: white;
} */

/* li:first-of-type {
  background-color: brown;
  color: white;
} */

/* li:last-of-type {
  background-color: brown;
  color: white;
} */

/* li:only-child {
  background-color: brown;
  color: white;
} */

/* li:nth-child(3) {
  background-color: brown;
  color: white;
} */

/* li:nth-child(even) {
  background-color: brown;
  color: white;
} */

/* li:nth-child(odd) {
  background-color: brown;
  color: white;
} */

li:nth-child(2n) {
  background-color: brown;
  color: white;
}

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44

Now save the file and reload the browser.

Pseudo class nth-child(2n)

Now let's practice the nth-child(formulae) a bit more.

Lets use the formulae 2n+2 2n + 2 => 2(0) + 1 => 1 2n + 2 => 2(1) + 1 => 3 2n + 2 => 2(2) + 1 => 5 2n + 2 => 2(3) + 1 => 7 2n + 2 => 2(4) + 1 => 9 . . . . until you run out of elements

So the styles will be applied to li with position 1,3,5,7,9,...

In your CSS file comment the above ":nth-child(2n)" styles and add the below styles as shown below.

css
/* li:first-child {
  background-color: brown;
  color: white;
} */

/* li:last-child {
  background-color: brown;
  color: white;
} */

/* li:first-of-type {
  background-color: brown;
  color: white;
} */

/* li:last-of-type {
  background-color: brown;
  color: white;
} */

/* li:only-child {
  background-color: brown;
  color: white;
} */

/* li:nth-child(3) {
  background-color: brown;
  color: white;
} */

/* li:nth-child(even) {
  background-color: brown;
  color: white;
} */

/* li:nth-child(odd) {
  background-color: brown;
  color: white;
} */

/* li:nth-child(2n) {
  background-color: brown;
  color: white;
} */

li:nth-child(2n + 1) {
  background-color: brown;
  color: white;
}

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49

Now save the file and reload the browser.

Pseudo class nth-child(2n + 1)

As you can see all the odd elements(1,3,5,7,..) gets selected.

You can go crazy with this formulae by bringing down your math skills.

Pseudo class - :nth-last-child()

Just like last-child, we also have nth-last-child to style the elements at position "n" starting from the bottom.

Comment the above nth-child() styles and add the below styles to your css file.

css
/* li:first-child {
  background-color: brown;
  color: white;
} */

/* li:last-child {
  background-color: brown;
  color: white;
} */

/* li:first-of-type {
  background-color: brown;
  color: white;
} */

/* li:last-of-type {
  background-color: brown;
  color: white;
} */

/* li:only-child {
  background-color: brown;
  color: white;
} */

/* li:nth-child(3) {
  background-color: brown;
  color: white;
} */

/* li:nth-child(even) {
  background-color: brown;
  color: white;
} */

/* li:nth-child(odd) {
  background-color: brown;
  color: white;
} */

/* li:nth-child(2n) {
  background-color: brown;
  color: white;
} */

/* li:nth-child(2n + 1) {
  background-color: brown;
  color: white;
} */

li:nth-last-child(2) {
  background-color: brown;
  color: white;
}

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54

Now save the file and reload the browser.

Pseudo class nth-last-child

As you can see 2nd last child(Java) which is an li elemet in skills section gets selected. In the Social section 2nd last children is br. So nothing gets selected.

Other Types

Just like first-of-type and last-of-type, we also have formulae versions of nth-of-type(formulae) nth-last-of-type(formulae). There are tons of other Pseudo classes as well. But most of the time, we dont use them.

Final Code

HTML:

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="login-form">
      <h1>Login Form</h1>
      <div>
        <input
          type="email"
          name="email"
          id="email"
          class="email"
          placeholder="Enter your email"
          required
        />
      </div>
      <div>
        <input
          type="password"
          name="password"
          id="password"
          class="password"
          placeholder="Enter your Password"
          required
        />
      </div>
      <div>
        <input
          type="text"
          name="name"
          id="name"
          class="name"
          placeholder="Enter your Name"
          disabled
        />
      </div>
      <button class="btn btn-submit">Login</button>
      <a href="#1" class="signup-link">Don't have an account?</a>
    </section>
    <section class="portfolio">
      <div>
        <h1>Skills</h1>
        <ul>
          <li>HTML(li element 1)</li>
          <li>CSS(li element 2)</li>
          <li>Javascript(li element 3)</li>
          <li>Java(li element 4)</li>
          <li>Python(li element 5)</li>
        </ul>
      </div>
      <div>
        <h1>Social</h1>
        <ul>
          <div>Social(div element 1)</div>
          <li>Twitter(li element 1)</li>
          <li>Gmail(li element 2)</li>
          <li>Facebook(li element 3)</li>
          <li>Instagram(li element 4)</li>
          <li>Whatsapp(li element 5)</li>
          <br>
          <ul>
            <li>Nested li element</li>
          </ul>
        </div>
      </h1>
    </section>
    <section class="social"></section>
  </body>
</html>

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
71 
72 
73 
74

CSS:

css
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    font-family: sans-serif;
}

.login-form,
.portfolio {
    width: 50%;
    margin: 0 auto;
    padding: 2rem 1rem;
    background-color: hsl(115, 25%, 69%);
    border-radius: 5px;
    margin-top: 1rem;
}

.login-form h1,
.portfolio h1 {
    text-align: center;
    margin-bottom: 1rem;
}

.email,
.password,
.name {
    width: 70%;
    margin-left: 7rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    font-size: 1.2rem;
    outline: none;
    border-radius: 5px;
}

.btn {
    background: none;
    border: none;
}

.btn-submit {
    margin-left: 7rem;
    background-color: cornflowerblue;
    padding: 0.5rem 1rem;
    font-weight: bold;
}

.signup-link {
    margin-left: 16.5rem;
}

li {
    padding: 0.3rem;
    list-style: none;
    background-color: rgb(95, 158, 160);
    margin-bottom: 0.5rem;
    text-align: center;
    font-size: 1.3rem;
}

ul div {
    text-align: center;
}

.btn-submit:hover {
    background-color: #f7a400;
    cursor: pointer;
}

.btn-submit:focus {
    background-color: yellow;
}

input:disabled {
    background-color: darkgreen;
}

input:required {
    border: 2px solid tomato;
}

a:link {
    color: crimson;
    text-decoration: none;
}

a:visited {
    color: darkcyan;
}

a:active {
    color: yellow;
}

/* li:first-child {
    background-color: brown;
    color: white;
} */

/* li:last-child {
    background-color: brown;
    color: white;
} */

/* li:first-of-type {
    background-color: brown;
    color: white;
} */

/* li:last-of-type {
    background-color: brown;
    color: white;
} */

/* li:only-child {
    background-color: brown;
    color: white;
} */

/* li:nth-child(3) {
    background-color: brown;
    color: white;
} */

/* li:nth-child(even) {
    background-color: brown;
    color: white;
} */

/* li:nth-child(odd) {
    background-color: brown;
    color: white;
} */

/* li:nth-child(2n) {
    background-color: brown;
    color: white;
} */

/* li:nth-child(2n + 1) {
    background-color: brown;
    color: white;
} */

li:nth-last-child(2) {
    background-color: brown;
    color: white;
}

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
71 
72 
73 
74 
75 
76 
77 
78 
79 
80 
81 
82 
83 
84 
85 
86 
87 
88 
89 
90 
91 
92 
93 
94 
95 
96 
97 
98 
99 
100 
101 
102 
103 
104 
105 
106 
107 
108 
109 
110 
111 
112 
113 
114 
115 
116 
117 
118 
119 
120 
121 
122 
123 
124 
125 
126 
127 
128 
129 
130 
131 
132 
133 
134 
135 
136 
137 
138 
139 
140 
141 
142 
143 
144 
145 
146 
147 
148 
149 
150 
151 
152

Conclusion

As you can see, If we keep on saying, there will be tons of other Pseudo class selectors. In this blog post we had seen Pseudo classes and how to use them. You can also use state selector pseudo classes to bring interactivity to the website like hover effects, etc.,

That's it for this post. If you liked it, Please like and leave a comment. You need to login to do those. Will See you in the next post. Peaaaceee!!!

Please signin to view resources

Comments

No Comments Found

Follow Us:

Related Posts

View All
Welcome to 'CSS for Everyone' - where you learn all about CSS from Beginning to Advanced

Welcome to 'CSS for Everyone' - where you learn all about CSS from Beginning to Advanced

Welcome, Learn essential CSS concepts and stay up-to-date with the latest trends and techniques in web design. Join us to enhance your CSS skills today.

Read more
Introducing CSS - What is CSS?

Introducing CSS - What is CSS?

Introduction to CSS. What is CSS and How to use it to design your web layouts and components to become a better frontend developer.

Read more
How to ADD (or) CONNECT our CSS with HTML

How to ADD (or) CONNECT our CSS with HTML

Discover how to connect CSS with HTML using inline, internal, and external stylesheets. This beginner-friendly guide covers methods and examples to style in css

Read more
Mastering CSS Selectors: Your Complete Guide to Targeting HTML Elements for frontend web developers

Mastering CSS Selectors: Your Complete Guide to Targeting HTML Elements for frontend web developers

Mastering CSS Selectors: Guide for Targeting HTML Elements using HTML Element Selector, ID Selector, Class Selector , Attribute Selector, Universal Selector

Read more
Mastering CSS Combinators: An Efficient way of Selecting HTML Elements for Frontend Web Developers

Mastering CSS Combinators: An Efficient way of Selecting HTML Elements for Frontend Web Developers

CSS Combinators: Selectors, Descendant Combinations, Child Combinations, Sibling Combinations, and More

Read more