The CSS selectors performs most important role to select and manipulate HTML Elements and style that elements according to need.
CSS selectors are used to “select” or “find” HTML elements based on their types, classes, id, attributes, values of attributes and much more.
1. CSS id Selector
The id selector uses the id attribute of HTML element to select or find the specific element within HTML document.
To select or find an element with a specific id, write a hash character(#), followed by the id of the element.
Sample Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS id Selector</title>
<style type="text/css">
#span1 {
font-size: 20px;
color: maroon;
}
</style>
</head>
<body>
<span id="span1">The id selector example</span>
</body>
</html>
Sample Result
2. CSS class Selector
The class selector uses the class attribute of HTML element to select or find elements with the specific class.
To select or find an elements with a specific class, write a dot or period character(.), followed by the name of the class for HTML element(s).
Sample Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS class Selector</title>
<style type="text/css">
.span1 {
font-size: 20px;
color: maroon;
}
</style>
</head>
<body>
<span class="span1">The class selector example1</span>
<br />
<span class="span1">The class selector example2</span>
</body>
</html>
Sample Result
The class selector example2
3. CSS element Selector
The element selector finds or selects HTML elements based on the element name.
Sample Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS HTML element Selector</title>
<style type="text/css">
span {
font-size: 20px;
color: maroon;
}
</style>
</head>
<body>
<span>The element selector example</span>
</body>
</html>
Sample Result
Download Free Sample Code
[wpdm_file id=3]
