Pseudo class selectors in CSS
A pseudo-class doesn't reply on a class attribute in the html markup, but is applied automatically by the browser depending on the position of the element or its interactive state.
A pseudo-class is used to define a special state of an element for example, it can be used to :
- style an element when a user mouse over it
- style visited and unvisited links differently
- style an element when it gets focus
CSS Selectors Can be divided into Five categories:
1.Simple Selectors (Element selector, Id selector, Class selector,Universal selector)
2.Combinator Selectors (Descendant selector, child selector, siblingselector , General selector)
3. Attribute Selector (allow you to select elements by referring theirattributes)
4. Pseudo-class selectors (select elements based on a certain state)
5. Pseudo-elements selectors (select and style a part of an element)
Pseudo Selectors in CSS with Example:
A Pseudo class in CSS is used to define the special state of an element. It can be combined with a CSS selector to add an effect to existing elements based on their states.
Example 1: Hover on head
|
<!DOCTYPE html> <head> <style> .head1:hover{
color:rgb(255, 53, 53); cursor:
pointer;
} </style>
</head> <body> <h2
class="head1">This is heading one</h2>
<div> <p class="para">Welcome To
launchpadlwd blog</p>
</div>
<h3
class="head2">This is heading 2</h3> </body> </html> |
Without hover:
With hover:
Tooltip Hover in CSS with Example:
A pseudo-class is used to define a special state of an element.
Example 2: Tooltip hover
|
<!DOCTYPE html> <html> <head> <style> h1 { display:
none;
background-color:rgb(223, 6, 243);
font-style: italic; }
div:hover h1 { display:
block; } </style> </head> <body>
<div>Hii i am here hover on me
<h1>Welcome To launchpadlwd blog</h1> </div>
</body> </html> |
Without hover:
Posts
0 Comments
Please do not enter any spam links in the comment box