CSS #id Selector
The “#” CSS id selector is used to set the style of an element with a given id. The id attribute is a unique identifier in an HTML document, ensuring that the id selector applies styles to a single, unique element. The id selector is prefixed with the “#” character.
Syntax:
#id {
// CSS property
}
Usage Examples
Example 1:
This example demonstrates the use of the #id selector to style specific elements.
<!DOCTYPE html>
<html>
<head>
<title>#id selector</title>
<!-- CSS property using id attribute -->
<style>
#gfg1 {
color: green;
text-align: center;
}
#gfg2 {
text-align: center;
}
</style>
</head>
<body>
<!-- id attribute declare here -->
<h1 id="gfg1">w3wiki</h1>
<h2 id="gfg2">#id selector</h2>
</body>
</html>
Output:
Example 2
This example demonstrates styling multiple elements with different ids using the same style.
<!DOCTYPE html>
<html>
<head>
<title># CSS id selector</title>
<!-- CSS property using id attribute -->
<style>
#geek, #gfg {
color: green;
text-align: center;
background-color:antiquewhite;
}
</style>
</head>
<body>
<!-- id attribute declare here -->
<h1 id="geek">w3wiki</h1>
<h2 id="gfg">Multiple id style at once</h2>
</body>
</html>
Output:
The CSS #id selector is a powerful tool for applying styles to specific, uniquely identified elements within an HTML document. By ensuring that each id is unique, developers can target and style individual elements with precision. This selector is widely supported across all major browsers, making it a reliable choice for web development.
Supported Browsers: The browser supported by the id selector are listed below:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 3 and above
- Firefox 1 and above
- Safari 1 and above
- Opera 3.5 and above
Contact Us