Selectors
one of the most impotent topic is css selector.
I am sure that if you have a very good knowledge about selector then you can easily manipulate all other font-end language like Java Script,Jquery,Angular js, because all they are inherit selector from css selector.
using selector we can select HTML element and manipulate selected element with appropriate css property and value.
There are several different type selector in css.
- Universal selector.
- Id selector.
- Class selector.
- Element/Tag selector.
Universal selector(*)
To Universal selector select all element in a web page.
For example- In a web page there have a h1 tag and a p tag.
<h1 style="color:red;font-size:50px;">Universal Selector</h1>
<p>Open Html file in notepad and see code</p>
After that decorate with css.
<style type="text/css">
* {
border: 1px solid;
color: #892121;
padding-left: 3px;
}
</style>
Output:
Id selector
Id selector select id attribute of HTML element.
Id name always unique in a HTML file.
In css file id selector decorate with '#' symbol.
Id is most higher precedence from other selector.
In a file id should be unique. If you use more then one id name same then first one select and remaining duplicate id name value are not selected.
Class selector is generic type selector.
For example, suppose i a web page there more then one html element contain same class name.Now when run the code then all same class name element are affected by css class value at same time.
In a file id should be unique. If you use more then one id name same then first one select and remaining duplicate id name value are not selected.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#sel1 {
border: 1px solid #bb8484;
}
</style>
</head>
<body>
<h1 id="sel1">Universal Selector</h1>
<p>Open Html file in notepad and see code</p>
</body>
</html>
output
Class selector
Using class selector we can select one or more then one element at once in a web page.Class selector is generic type selector.
For example, suppose i a web page there more then one html element contain same class name.Now when run the code then all same class name element are affected by css class value at same time.
Class name value should not started with a numbers.
In css file class name selector started with (.) dot.
In css file class name selector started with (.) dot.
example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sel1 {
border: 1px solid #bb8484;
color: pink;
}
</style>
</head>
<body>
<h1 class="sel1">Id selector </h1>
<p class="sel1">Open Html file in notepad and see code</p>
</body>
</html>
Output
--
Element selector
Element selector select html element wise,find html element and decorate with css.
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
h1 {
border: 1px solid #bb8484;
color: pink;
}
</style>
</head>
<body>
<h1>Id selector </h1>
<p>Open Html file in notepad and see code</p>
</body>
</html>
Output
No comments:
Post a Comment