A pseudo-class is used to define a special state of an element.
The :active pseudo selector changes the appearance of a link while it is being activated (being clicked on or otherwise activated). It's usually only seen for a split second, and provides visual feedback that the element was indeed clicked. It's most typically used on anchor links (<a href="#">).
.myLink{
position:relative;
}
.myLink:active{
top : 2px;
}
<a class="myLink">Click Here</a>
:active also works on any element. But they are used very rarely. 99% of time developer use :active Pseudo class only on link. Here is an example of using :active pseudo class on an div element.
.activeondiv{background-color: #ccc;}
.activeondiv:active{background-color: red;}
<div class="activeondiv">
Click On Me
</div>
The :hover pseudo class in CSS selects elements when the mouse cursor is current over them. It's commonly associated with link () elements. But it works with any element.
.myLink{
font-size: 15px;
}
.myLink:hover{
font-size: 25px;
}
<a class="myLink">Click Here</a>
.hovermebox{
border-radius : 0;
height : 100px;
width: 100px;
background: crimson;
transition: all 0.5s;
}
.hovermebox:hover{
border-radius: 50%;
}
<div class="box">
<div class="hovermebox"></div>
</div>
:visited is a pseudo-class selector that can change some of the styling on an anchor link (a) element if the user's browser has already visited the link. It's meant to help users distinguish the difference between links they have and haven't visited.
.visitedLink:visited{
color: red;
}
<a class="visitedLink" href="Border.html" target="_blank">Click Here</a>
Initially the link color is different. But after clicking on that link the color of the link will be changed to red.
The :empty pseudo selector will select elements that contain either nothing or only an HTML comment.
div:empty {
display: none;
}
The above selector will match the following --
<div></div> <div><!-- test --></div>
But it will not match the following -
<div> </div> <div> </div> <div> </div>
Because the first one has space, and the second one has new line and tab, and the third one has a new line. These white space is also considered as a content as it creates TextNode in dom.
It's useful for hiding empty elements that might cause weird spacing (e.g. they have padding). Or something like removing the border from the top left table cell element in a cross-referencing table.
The :blank pseudo-class builds upon the :empty pseudo-class. Like :empty, :blank will select elements that contain nothing at all, or contain only an HTML comment. But, :blank will also select elements that include whitespace, which :empty will not.
p:blank {
display: none;
}
p:blank will select these paragraphs, just like p:empty would:
<p></p> <p><!-- nothing but a comment--></p>
And it will also select these paragraphs, which p:empty would not:
<p> </p> <p> <!--a comment and some whitespace--> </p>
The :first-child selector allows you to target the first element immediately inside another element.
<article> <p>First paragraph...</p> <p>Lorem ipsum...</p> <p>Dolor sit amet...</p> <p>Consectetur adipisicing...</p> </article>
Instead of giving it a class (e.g. .first), we can use :first-child to select it:
p:first-child {
font-size: 1.5em;
}
The above example will select the paragraph which contains "First Paragraph...". You get the idea.
The :last-child selector allows you to target the last element directly inside its containing element.
<article> <p>First paragraph...</p> <p>Lorem ipsum...</p> <p>Dolor sit amet...</p> <p>Consectetur adipisicing...</p> </article>
Instead of giving it a class (e.g. .last), we can use :last-child to select it:
p:last-child {
font-size: 1.5em;
}
The above example will select the paragraph which contains "Consectetur adipisicing...". You get the idea.
The :nth-child selector allows you to select one or more elements based on their source order, according to a formula.
.box1{
display: flex;
justify-content: center;
align-items: center;
}
.box1>div{
margin: 20px;
height: 50px;
width: 50px;
}
.childBox:nth-child(3){
background: black;
}
.childBox:nth-child(2){
background: red;
}
.childBox:nth-child(1){
background: blue;
}
.childBox:nth-child(4){
background: green;
}
<div class="box1">
<div class="childBox"></div>
<div class="childBox"></div>
<div class="childBox"></div>
<div class="childBox"></div>
</div>
Rather than adding a class to every item, we can use :nth-child()
As you can see, :nth-child takes an argument: this can be a single integer, the keywords even or odd, or a formula. If an integer is specified only one element is selected—but the keywords or a formula will iterate through all the children of the parent element and select matching elements — similar to navigating items in a JavaScript array. Keywords “even” and “odd” are straightforward (2, 4, 6 etc or 1, 3, 5 respectively). The formula is constructed using the syntax an+b, where:
It is important to note that this formula is an equation, and iterates through each sibling element, determining which will be selected. The “n” part of the formula, if included, represents a set of increasing positive integers (just like iterating through an array). We can selected every fourth element with the formula 4n, which worked because every time an element was checked, “n” increased by one (4×0, 4×1, 4×2, 4×3, etc). If an element’s order matches the result of the equation, it gets selected (4, 8, 12, etc).
Let's get back to the "3n+3" from the original example though. How does that work? Why does it select every third element? The trick is understanding the "n" and algebraic expression that represents. Think of "n" as starting at zero and then a set of all positive integers. Then complete the expression. So the 3n is "3xn", and the whole expression together is "(3xn)+3". Now substituting in the zero and positive integers, we get:
How about the :nth-child(2n+1)?
Hey wait! That's the same as "odd", so probably don't need to use that one very often. But wait now. Haven't we exposed our original example as being overly complicated? What if instead of "3n+3", we used "3n+0", or even simpler "3n".
So as you can see, the matches are exactly the same, no need for the "+3". We can use negative n values, as well as use subtraction in the expressions. For example, 4n-1:
The :nth-last-child selector allows you select one or more elements based on their source order, according to a formula. It functions the same as :nth-child except it selects items starting at the bottom of the source order, not the top.
Suppose we have a list with an unknown number of items, and we wish to highlight the second-to-last item (in this exact example, the "Fourth Item"):
<ul> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> <li>Fourth Item</li> <li>Fifth Item</li> </ul>
Rather than doing something like adding a class to the list item (e.g. .highlight) we can use :nth-last-child:
li {
background: slategrey;
}
/* select the second-last item */
li:nth-last-child(2) {
background: lightslategrey;
}
As you can see, :nth-last-child takes an argument: this can be a single integer, the keywords “even” or “odd”, or a formula. Just like :nth-child(expression)
The :in-range pseudo selector in CSS matches input elements when their value is within the range specified as being acceptable.
.rangeInput{
border: 5px solid red;
}
.rangeInput:in-range{
border : 5px solid green;
}
<input class="rangeInput" type="number" min="5" max="10">
In the above example, if you put any number between 5 and 10, the border will be green. But for any other value, the border will be red.
This pseudo element works only on input element with the number type. You must use min and max attribute to make it work well with the element.
The :invalid selector allows you to select <input> elements that do not contain valid content.
The :invalid selector only works for form elements with limitations, such as input elements with min and max attributes, email fields without a legal email, or number fields without a numeric value, etc.
.invalidtest{
background : #eee;
}
.invalidtest:invalid{
background: red;
}
<div class="box">
<div>
<input type="number" class="invalidtest" min="5" max="10">
</div>
<div>
<input type="email" class="invalidtest" placeholder="email">
</div>
</div>
Try entering any number other than 5 to 10, the background will change to red. The second textbox accepts an email, so providing wrong email will cause the background to be red.
The :valid selector allows you to select <input> elements that contain valid content, as determined by its type attribute.
.validtest{background: #eee;}
.validtest:valid{background: green; color: #fff;}
<div class="box">
<input type="number" min="5" max="10" class="validtest" required="true">
<input type="email" class="validtest" required="true">
</div>
Try entering any number between 5 to 10 in the box, the background will change to green as this is a valid value. And also in the second email box, give any valid email, the box will turn to green.
The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input (<input>) elements of type radio and checkbox . The :checked pseudo-class selector matches radio and checkbox input types when checked or toggled to an on state. If they are not selected or checked, there is no match.
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
<div class="box">
<input type="checkbox" value="hello" id="checkdemo">
<label for="checkdemo">I Love CSS</label>
</div>
input[type=radio] + label {
color: #ccc;
font-style: italic;
}
input[type=radio]:checked + label {
color: #f00;
font-style: normal;
}
<div class="box">
<input type="radio" value="hello" id="checkdemo">
<label for="checkdemo">I Love CSS</label>
</div>
The :disabled pseudo-class selector provides conditional styling to HTML elements that can receive user input, when the elements have the disabled attribute.
Elements that can receive the disabled attribute include <button>, <input>, <textarea>, <optgroup>, <option> and <fieldset>. There are two valid syntaxes for setting this attribute: either disabled="disabled" or (in HTML5) simply the disabled Boolean keyword. An element is disabled if it can't be activated (e.g. selected, clicked on or accept text input) or accept focus.
Such an element can be styled using the :disabled pseudo-class selector:
input:disabled{
background: linear-gradient(black, white);
}
<div class="box">
<input type="text" disabled="disabled">
</div>
The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example:
The :focus selector is used to select the element that has focus.
textarea:focus {
background: pink;
}
<div class="box">
<textarea></textarea>
</div>
The :link selector is used to select unvisited links.
The :link selector does not style links you have already visited.
.linktest:link{
font-style: italic;
border: 1px solid black;
}
<div class="box">
<a class="linktest" href="https://www.google.com">Google</a>
</div>
The :not(X) property in CSS is a negation pseudo class and accepts a simple selector1 as an argument. Essentially, just another selector of any kind.
:not matches an element that is not represented by the argument.
selector :not(selector){
// Style
}
This selector is same as :nth-child. But with one difference.
The :nth-child will select matching elements if the elements are different type. This selector selects siblings irrespective of the element type. It will try to match all siblinigs.
:nth-of-type—it targets a particular type of element in an arrangement with relation to similar siblings, not all siblings.
Take a look at the following examples -
.nthoftypeDemo:nth-child(2n+1){
background: #eee;
}
<div class="box">
<div class="nthoftypeDemo">If you ever want to hide a dead body, put it on the second page of Google's Search.</div>
<p class="nthoftypeDemo">"We are having problem with MySQL !"</p>
<p class="nthoftypeDemo">Okay, Fix your SQL as soon as possible.</p>
<p class="nthoftypeDemo">Dad ! What are Clouds made of?</p>
<div class="nthoftypeDemo">Well, it made of Linux Server, MySQL, Apache and lot more.</div>
</div>
"We are having problem with MySQL !"
Okay, Fix your SQL as soon as possible.
Dad ! What are Clouds made of?
.nthoftypeDemoTwo:nth-of-type(2n+1){
background: #eee;
}
<div class="box">
<div class="nthoftypeDemoTwo">If you ever want to hide a dead body, put it on the second page of Google's Search.</div>
<p class="nthoftypeDemoTwo">"We are having problem with MySQL !"</p>
<p class="nthoftypeDemoTwo">Okay, Fix your SQL as soon as possible.</p>
<p class="nthoftypeDemoTwo">Dad ! What are Clouds made of?</p>
<div class="nthoftypeDemoTwo">Well, it made of Linux Server, MySQL, Apache and lot more.</div>
</div>
"We are having problem with MySQL !"
Okay, Fix your SQL as soon as possible.
Dad ! What are Clouds made of?
The :only-of-type pseudo-class selector in CSS represents any element that has no siblings of the given type.
Here is an Example
As a fun aside, you could achieve the same selection as :only-of-type with :first-of-type:last-of-type or :nth-of-type(1):nth-last-of-type(1). Those use two chained selectors though, meaning the specificity is double that of :only-of-type.
The :only-child pseudo-class selector property in CSS represents an element that has a parent element and whose parent element has no other element children. This would be the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.
Here is an Example
The :optional pseudo class targets inputs (including <select>s) that are not specifically set as required (do not have the required attribute).
This can be useful when you want to give optional fields a specific look, maybe slightly less visible than required ones.
input[type=text]:optional {
border: 1px solid #eee;
}
select:optional{
background: red;
}
<div class="box">
<input type="text">
<input type="text" required="true">
<select>
<option>Kolkata</option>
<option>Delhi</option>
<option>Mumbai</option>
</select>
<select required="true">
<option>Kolkata</option>
<option>Delhi</option>
<option>Mumbai</option>
</select>
</div>
The :out-of-range pseudo selector in CSS matches input elements when their value is outside the range specified as being acceptable.
input:out-of-range {
border: 5px solid red;
}
<input type="number" min="5" max="10">
I believe it's only relevant on input[type=number]. Range inputs don't allow values outside their min/max and it doesn't make much sense on any other type of input.
:read-only is mutability pseudo-classes aiming at making form styling easier based on disabled, readonly and contenteditable HTML Attributes.
.test {
display: block;
margin-bottom: 1em;
border: 1px solid silver;
width: 100%;
padding: .5em;
}
.readonlyparagraph:read-only {
background: tomato;
}
<input class="test" type="text" value="Regular input" />
<input class="test" type="text" value="Disabled input" disabled />
<input class="test" type="text" value="Readonly input" readonly />
<p class="test readonlyparagraph" contenteditable>Contenteditable paragraph</p>
<p class="test readonlyparagraph">Regular paragraph</p>
Contenteditable paragraph
Regular paragraph
The :read-write selector selects form elements which are "readable" and "writeable".
Currently, in most browsers, the :read-write selector only applies to input and textarea elements, where the "readonly" attribute is not present, regardless if the element is disabled or not.
<input class="testReadWrite" type="text" value="Regular input" /> <input class="testReadWrite" type="text" value="Disabled input" disabled /> <input class="testReadWrite" type="text" value="Readonly input" readonly />
The :required pseudo class selector in CSS allows authors to select and style any matched element with the required attribute. Forms can easily indicate which fields must have valid data before the form can be submitted.
.requiredTesting:required {
background: red;
}
<input class="requiredTesting" type="name" name="fname" required>
<input type="name" name="fname" required>
The :root selector matches the document's root element.
In the overwhelming majority of cases you're likely to encounter, :root refers to the element in a webpage. In an HTML document the html element will always be the highest-level parent, so the behaviour of :root is predictable. However, since CSS is a styling language that can be used with other document formats, such as SVG and XML, the :root pseudo-class can refer to different elements in those cases. Regardless of the markup language, :root will always select the document's top-most element in the document tree.
While the :root selector and html selector both target the same HTML elements, it may be useful to know that :root actually has a higher specificity. Pseudo-class selectors (but not pseudo-elements) have a specificity equal to that of a class, which is higher than a basic element selector.
:root {
background-color: cornflowerblue;
padding: 3em;
}
URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element.