Using CSS selectors, we can specifically style desired elements based on our preference. There are various methods for selecting elements in the HTML DOM.
Syntax
The syntax for CSS selectors is as follows −
Selector {
/*declarations*/
}The following examples illustrate CSS selector for styling elements −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#one {
filter: invert(85%);
}
</style>
</head>
<body>
<img id="one" src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg">
<img src="https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg">
</body>
</html>Output
This gives the following output −
Example
<!DOCTYPE html>
<html>
<head>
<style>
div, p {
margin: 4px;
float: left;
height: 200px;
width: 300px;
box-shadow: inset 0 2px 4px olive;
background-image: url("https://www.tutorialspoint.com/sas/images/sas-mini-logo.jpg");
}
p {
background-image: url("https://www.tutorialspoint.com/qlikview/images/qlikview-mini-logo.jpg");
background-position: 50% 50%;
color: black;
}
</style>
</head>
<body>
<h2>Learning Tutorials</h2>
<div></div>
<p>Tutorials</p>
</body>
</html>Output
This gives the following output −
