Selectors In CSS with examples
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, sibling selector, General selector)
3. Attribute Selector(allow you to select elements by referring their attributes)
4. Pseudo-classselectors (select elements based on a certain state)
Element Selector in CSS with Example:
Example 1 : Element Selectors
|
<!DOCTYPE html> <head>
<title>Selector</title>
<style>
p{color: red;}
</style> </head> <body> <h2>This is heading so it will color
will not change</h2> <p> Welcome
to launchpadlwd blog <br> note
this paragraph will become red </p> </body> </html> |
Output:
Id Selector in CSS with Example:
Example 2 : Id Selectors
|
<!DOCTYPE html> <html> <head> <style> #para1{color: blue} #para2{color: red;} </style> </head> <body> <p id="para1">Welcome
To</p> <p
id="para2">launchpadlwd blog.</p> </body> </html> |
Output:
Class Selector in CSS with Example:
Example 3 : Class Selectors
|
<!DOCTYPE html> <html> <head> <style> .head{color: blue;} .para1{color: red;} </style> </head> <body> <h1
class="head1">Welcome To</h1> <p
class="para1">launchpadlwd blog.</p> </body> </html> |
Output:
Universal Selector in CSS with Example:
Example 3 : Class Selectors
|
<!DOCTYPE html> <html> <head> <style> *{
font-size: 20px;
color: red;
text-align: center; } </style> </head> <body> <h1>Welcome To</h1> <p>launchpadlwd blog.
</p> <p>Universal selector will
Apply to all elements</p> </body> </html> |
Output:
Group Selector in CSS with Example:
Example 4 : Group Selectors
|
<!DOCTYPE html> <html> <head> <style> h1,p,B{
font-size: 20px;
color: orange; } </style> </head> <body> <h1>Welcome To</h1> <p>launchpadlwd blog.
</p> <B>Group selector will Apply to
selected elements</B> </body> </html> |
Output:
Posts
0 Comments
Please do not enter any spam links in the comment box