#CSS #Pseudo classes #Usecase

Even though the word pseudo means not real or fake, peudo classes of CSS are not of those. They come more meaningful with their specific use cases. Let us take a look at two of those pseudo classes in this blog.

1
2
3
4
5
6
7
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>

As we have our rating numbers, now we want to notify the user which is the low and the high end. We can do the same using our fancy first-child and last-child pseudo classes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div {
  font-size: 30;
}

span {
  padding: 5px;
  border: 2px solid black;
}

span:first-child {
  background-color: orange;
}

span:last-child {
  background-color: greenyellow;
}

Highlighting first and last numbers

Below we use the same peudo classes to highlight a table’s header and footer. ^_^

1
2
3
4
5
6
7
8
9
<section>
  <div>Tech Stack</div>
  <div>JS</div>
  <div>CSS</div>
  <div>HTML</div>
  <div>Angular</div>
  <div>GraphQL</div>
  <div>Total - 5</div>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
section {
  font-size: 30;
  width: 200px;
}

div {
  padding: 5px;
  border: 2px solid black;
}

div:first-child {
  background-color: gray;
}

div:last-child {
  background-color: gray;
}

Highlighting first and last rows

#CSS #Pseudo classes #Usecase