The dot(.) and hash(#) both of them are used as CSS selectors. Both selectors are used to select the content to set the style. CSS selectors select HTML elements according to their id, class, type, attribute, etc.
Id selector(“#”): The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element. It is written with the hash character (#), followed by the id of the element.
- Syntax:
#element_id_name{
// CSS properties
}- Example: In this code, we will use only the id selector to set the style to the HTML elements.
<!DOCTYPE html><html>
<head>
<title>CSS Selector id(#)</title>
<style>
#container {
width: 400px;
height: 150px;
border: 2px solid black;
text-align: center;
}
#geeks {
color: green;
}
#gfg {
font-family: Courier New;
}
</style>
</head>
<body>
<div id="container">
<h1 id="geeks">GeeksforGeeks</h1>
<h4 id="gfg">A Computer Science portal for Geeks</h4>
<b class="selector">CSS Selector id(#)</b>
</div>
</body>
</html>
|
-
Output:
Class Selector(“.”): The class selector selects HTML elements with a specific class attribute. It is used with a period character “.” (full stop symbol) followed by the class name.
- Syntax:
.element_class_name{
// CSS properties
}- Example: In this code, we will use only class selector to set the style to the HTML elements.
<!DOCTYPE html><html>
<head>
<title>CSS class Selector</title>
<style>
.container {
width: 400px;
height: 150px;
border: 2px solid black;
text-align: center;
}
.geeks {
color: green;
}
.selector {
font-family: Courier New;
}
</style>
</head>
<body>
<div class="container">
<h1 class="geeks">GeeksforGeeks</h1>
<h4 id="gfg">A Computer Science portal for Geeks</h4>
<b class="selector">CSS Selector class(.)</b>
</div>
</body>
</html>
|
-
Output:
Another way to use the “.” class selector:
Syntax:
element_name.class_name{
/*properties*/
} Note: This way is more frequently used to avoid same class name conflict.
Difference between class (“.”) and id (“#”) Selectors:
| “.” | “#” |
|---|---|
| The class selector “.” is used to represent class=”class_name” in the HTML element. | The id selector “#” is used to represent id=”id_name” in the HTML element. |
| Each element can contain more than one “.” selector means that elements is containing more than one class which is separated by space, they will be selected by multiple dots like .class1 .class2 …. and so on. | Each element can contain only one “#” selector, not more than one unlike class selectors. |
| The “.” selectors are not unique, the same selectors can apply to multiple elements if the HTML elements hold the same class property like a list of elements can contain the same class. | The “#” is unique. |
Example: The Combine selector example, in this example we will use both the selectors “.” and “#”.
<!DOCTYPE html> <html>
<head>
<style>
/* #id selector */
#geeks {
color:green;
}
/* .class selector */
.gfg {
background-color: yellow;
font-style:italic;
color:green;
}
/* .class selector */
.options {
background-color: yellow;
color:purple;
}
</style>
</head>
<body style = "text-align:center">
<h1 id = "geeks">
GeeksforGeeks
</h1>
<h4>#id And .class Selector</h4>
<div class = "gfg">
<p>A computer science portal for Geeks</p>
</div>
<div class="select">
<select name="slct" id="slct">
<option>Computer Science Subjects</option>
<option class="options">Operating System</option>
<option class="options">Computer Networks</option>
<option class="options">Data Structure</option>
<option class="options">Algorithm</option>
<option class="options">C programming</option>
<option class="options">JAVA</option>
</select>
</div>
</body>
</html>
|
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari