Comprehensive CSS Basics For Beginners

Welcome back. We are still on the marathon with our Comprehensive CSS basic for beginners. In today's tutorial, I will be emitting ideas on Pseudo classes in a way that you can easily comprehend. So, stay tuned.

So, ladies and gentlemen boys and girls, let's get right into it.

1. Hover Pseudo Class

Sometimes you want to make a dropdown in a such a manner that when you move a mouse over the element, it displays the hidden dropdown. Hover is there to help you accomplish that.

<style>
.dropdown {
display:none
}
#wife::hover {
right:100%;
position: relative;
}
#wife::hover  .dropdown::hover {
display:block
}
</style>
<div id="wife">
<div class="dropdown"></div>
</div>

2. Focus Pseudo Class

When designing input fields, many at times you will want to differentiate the current input that the user is filling. That is where the focus pseudo class can be used.


input::focus {
border:1px solid blue;
}

3. Required Pseudo class

This is used to style input fields that are required.

input::required {
border: 1px solid green;
}

4. Checked Pseudo class

Checked Pseudo class is a interesting one. It is used to style an input type radio or checkbox. Mostly when it is at check state. Lets take a look at an example.

<label>
<input type="radio">
Check
</label>

<div class="accordion">This is the accordion</div>

Suppose you are implementing an accordion so as when a user click on the label the accordion is displayed. Then this is how we do it

.accordion {
height:0px;

}

input::checked + .accordion{
height:40px;
}

5. Disabled Pseudo class

Sometimes you want to disable a button until a user fills some kind of input fields. When that is true, then you can use css to style the button when disabled. Like so.

input::disabled {
opacity:0.3
}

6. First-Child Pseudo Class

To style a an element that is a first child to some sort of parent element. You will use first-child pseudo class like so:

<ul>
<li>First child</li>
<li>Last Child</li>

</ul>

<style>
li::first-child {
bakcground:red;
}
<style>

7. Last-child Pseudo Class

This is the exact opposite to first class it is used to style the last child.

<table>
<tr>First child</tr>
<tr>Last child</tr>
</table>

<style>
table tr:last-child {
background:blue;
}
</style>

8. Only-child Pseudo class

When you want to style an element without siblings. This is what you will use.

<div>
<span>Only Child</span>
</div>


<style>
span::only-child {
color:red;
}
</style>

9. `First of Type`

If you have different elements being siblings, you sometimes want to select only the first of particular type , that is when first-of-type can be used.

<div>
<div>First of div</div>
<span>First of span</span>
<div><div>
<span></span>
</div>

div:first-of-type {
background:red;
}

10. `Last-of-type`

An exact opposite of First-of-type.

<div>

<div><div>
<span></span>
<div>Lastof div</div>
<span>Last of span</span>
</div>

span::last-of-type {
background:red;
}

11. Not Pseudo class

If you want to select elements which are not(elements you intend), then ::not is the pseudo class to use.

<ul>
<li class="red"></li>
<li class="red"></li>
<li class="blue"></li>
</ul>

<style>
li::not(.blue) {
color:white;
background:red;
}
</style>

CONLUSION

There yo go. Hopefully you have learned something great today. We are working on a pdf compilation of Comprehensive CSS basic. Should you be interested please let us know in the comments and you will be the first to get it for Free. Thanks and all the best. See you in the very next one.

Comprehensive CSS Basics For Beginners:Summary 06