CSS Pseudo classes

 Pseudo classes

In this article ,we will learn about the common pseudo classes which are used in the CSS language during designing the web development.

:first-child()

:last-child()

:nth-child()

:nth-last-child

:nth-last-type-child

:nth-of-type

:only-child

:only-of-type

:last-of-type

:first-of-type

:empty

:not()


First-child()

In the following example,selectors match all the first child of div section


div.box1 p:first child{

color:blue;

}


<div class=”box1”>

<p>programgrab1</p>

<p>programgrab2</p>

<div class=”box2”>

<p>programgrab1</p>

<p>programgrab2</p>

</div></div>


last-child()

In the following example,selectors match all the last child<p> of div section

div.box1 p:last child{

color:blue;

}


<div class=”box1”>

<p>programgrab1</p>

<p>programgrab2</p>

<div class=”box2”>

<p>programgrab1</p>

<p>programgrab2</p>

</div></div>

nth-child()

In the following example,selectors match the selective number that is one of  child<p> of div section

div.box1 p:nth-child(1){

color:blue;

}

<div class=”box1”>

<p>programgrab1</p>

<p>programgrab2</p>

<div class=”box2”>

<p>programgrab1</p>

<p>programgrab2</p>

</div></div>



nth-last-child

In the following example,selectors match the selective number that is one of  child<p> of div section

div.box1 p:nth-last-child(1){

color:blue;

}

<div class=”box1”>

<p>programgrab1</p>

<p>programgrab2</p>

<div class=”box2”>

<p>programgrab1</p>

<p>programgrab2</p>

</div></div>



nth-last-type-child

In a similar way of nth-last-child,nth-last-type-child work but check the type of child instead of a number of children.



nth-of-type

In the similar way of nth-child,nth-type-child work but check the type of child instead of number of child.



only-child

In the following example,selectors match the single  child of div section that is programgrab3. 

div p:only-child{

color:blue;

}

<div class=”box1”>

<h3>heading</h3>

<p>programgrab1</p>

<p>programgrab2</p>

<div class=”box2”>

<p>programgrab3</p>

</div><.div>


only-of-type

In the following example,selectors match the single type  of  child of div section that is h3 . 

div.box1 p:only-of-type{

color:blue;

}

<div class=”box1”>

<h3>heading</h3>

<p>programgrab1</p>

<p>programgrab2</p>

<div class=”box2”>

<p>programgrab1</p>

<p>programgrab2</p>

</div></div>




last-of-type



In the following example,selectors match the last type of <p> child of div section

div.box1 p:last-of-type{

color:blue;

}

<div class=”box1”>

<p>programgrab1</p>

<p>programgrab2</p>

<div class=”box2”>

<p>programgrab1</p>

<p>programgrab2</p>

</div></div>





First-of-type

In the following example,selectors match all the first type of <p> child of div section

div.box1 p:first-of-type{

color:blue;

}

<div class=”box1”>

<p>programgrab1</p>

<p>programgrab2</p>

<div class=”box2”>

<p>programgrab1</p>

<p>programgrab2</p>

</div></div>



Empty


The empty select any of tag of HTML is empty or not.


Not

The not select the tag which you want not to select and all the other tags are selected.







:
Location: United States

Comments

  1. AdminJanuary 17, 2021 at 5:03 AM

    Admin,I am absolutely here on this great website. This is my favorite website. Sharing articles are good and helpful. We are waiting read your more post in future. Thanks for sharing your great ideas and helpful articles. https://mobileapk.net

    ReplyDelete

Post a Comment

Popular posts from this blog

how to cout in cpp

Image
HOW TO COUT IN C++ In this article, you will learn how to cout in CPP  and use of cout in the program with the help of Examples.  In the CPP language displaying things on the console is not a difficult task. First of all build-in library add on the top of the program. The library is used for cout and cin in the cpp language is iostream library. The syntax of the cout in cpp: cout<<" your message "; The universal problem about to print hello world in c++.Here is an example of how to print hello world in cpp. Print hello world #include<iostream> using namespace std; int main() { cout<<" hello world"<<endl; } output: hello world
Read more

Flutter layout

In this blog post, we will explore some of the key concepts and techniques used in Flutter layout and provide examples of how to build a layout for a Flutter application. Widgets and Elements Widgets are the building blocks of a Flutter UI. A widget can be thought of as a self-contained unit of UI, such as a button or a text field. Elements are the instances of widgets that are displayed on the screen. For example, if you have a button widget in your Flutter UI, there will be an element that represents that button on the screen. Layout Widgets Layout widgets are widgets that are specifically designed to control the positioning and sizing of other widgets in a Flutter UI. The most commonly used layout widgets in Flutter are: Container: The Container widget is used to create a rectangular box in a Flutter application. It can be used to add padding, margins, and borders to the widget it contains. Row: The Row widget is used to display a horizontal row of widgets in a Flutter application.
Read more

input by cin in c++

Image
Cin in CPP In this post, we shall learn about how to take input with the help of in the cin and uses it in the CPP language. Taking input in cpp is not a difficult task. The object which is used for taking input in cpp is the cin . The library which is allowed to use the cin object is the iostream. Method for including the iostream library in the program. The syntax is here: #include<iostream> How to take input in c++? CIN  is used for taking any kind of data from the user. The data may be int, float, and char.cin is also used to taking string in the CPP. If someone learns CPP then cin is important to use because it allows to user to interact with your program. The program will be user friendly and generic by using a cin object.
Read more