CSS #id Selector (original) (raw)
Last Updated : 04 Jan, 2025
The ID selector in CSS is used to select a single element on a page by referencing its id attribute. This attribute must be unique within a page, meaning no two elements can have the same id. The ID selector is prefixed with a hash (#) symbol in CSS.
Basic ID Selector
The ID selector allows you to style a specific element by targeting its unique id attribute. This is perfect for applying custom styles to an element that only appears once on the page.
HTML `
<style>
#header {
color: blue;
font-size: 24px;
text-align: center;
}
</style>`
**Syntax
#elementId {
/* styles */
}
Where element Id is the value of the id attribute on the HTML element you want to target.
How Does the ID Selector Work
The ID selector is extremely specific because the id attribute is unique within a page. Therefore, using the #id selector is an efficient way to target a single element for styling. This specificity also means that the styles applied using an ID selector will generally override other, less specific selectors like class selectors.
1. ID Selector for Styling a Button
Use the ID selector to target buttons and apply unique styling, such as background colors and padding. This is useful for creating buttons with distinctive designs across your website.
HTML `
<style>
#submitBtn {
background-color: green;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
#submitBtn:hover {
background-color: darkgreen;
}
</style>`
2. Styling Section with a Specific ID
ID selectors can be used to style entire sections of a webpage, making it easy to create consistent layouts. For example, you can apply a background color and padding to a specific section of content.
HTML `
<style>
#about {
background-color: #f4f4f4;
padding: 20px;
margin-top: 20px;
}
</style>About Us
We are a leading company in the industry...
`
3. Combining ID Selector with Pseudo-Classes
By combining the ID selector with pseudo-classes like :hover, you can create interactive elements. For instance, changing the background color of a button when the user hovers over it.
HTML `
<style>
#submitBtn {
background-color: green;
color: white;
padding: 10px 20px;
}
#submitBtn:hover {
background-color: darkgreen;
}
</style>`
4. Targeting Nested Elements with an ID Selector
ID selectors can also target nested elements within a specific container. This allows for precise styling of child elements like text or links within a div or section.
HTML `
<style>
#footer {
background-color: #333;
color: white;
padding: 20px;
}
#footer span {
font-weight: bold;
}
</style>Contact us: info@example.com
`
5. ID Selector for Navigation
When styling navigation bars, the ID selector provides a way to apply unique styles to the entire navigation element. It helps define things like font size, background color, and alignment.
HTML `
<style>
#nav {
font-size: 18px;
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
</style>`
6. ID Selector for Targeting Forms
You can use the ID selector to style forms and their elements individually, applying padding, borders, and spacing. This is ideal for making forms visually appealing and easy to fill out.
HTML `
<style>
#contactForm {
background-color: #f9f9f9;
padding: 20px;
border-radius: 5px;
}
#contactForm input {
margin-bottom: 10px;
padding: 8px;
width: 100%;
}
</style>`
7. ID Selector for Elements with Specific Layout
The ID selector is perfect for styling elements that have unique layout requirements, such as footers. You can adjust margins, padding, and background colors to match the design of the page.
HTML `
<style>
#footer {
margin-top: 30px;
padding: 20px;
background-color: #222;
color: white;
text-align: center;
}
</style>`
8. Combining Multiple IDs with Other Selectors
You can combine an ID selector with other selectors like element or class selectors to target specific child elements. This provides more control over nested structures, such as styling only h1 tags inside a section with a specific ID.
HTML `
<style>
#header h1 {
color: red;
font-size: 24px;
}
</style>Welcome to My Website
`
9. Using ID Selector for Unique Content
When you need to apply unique styles to specific pieces of content, use the ID selector to ensure that particular elements stand out. This is great for creating distinctive sections like call-to-action boxes.
HTML `
<style>
#uniqueBox {
background-color: lightblue;
padding: 15px;
border: 1px solid #ccc;
text-align: center;
}
</style>`
10. Overriding Other Selectors Using ID Selector
Due to its high specificity, the ID selector can override other selectors like class-based styles. This is useful when you want to ensure a particular element’s style takes precedence.
HTML `
<style>
.box {
background-color: lightgray;
padding: 15px;
text-align: center;
}
#specialBox {
background-color: yellow;
}
</style>`
11. ID Selector for Animations or Transitions
The ID selector can be combined with CSS transitions or animations to add dynamic effects to elements. This allows you to smoothly animate properties like size or position when the element is hovered or clicked.
HTML `
<style>
#box {
background-color: lightcoral;
width: 100px;
height: 100px;
transition: transform 0.3s;
margin: 20px;
}
#box:hover {
transform: scale(1.2);
}
</style>`
12. Overriding element selector by id selector
The ID selector has a higher specificity than element selectors, meaning it will override any styles applied to elements of the same type. This allows you to apply unique styles to specific elements without affecting others.
HTML `
<style>
p {
color: green;
font-size: 16px;
}
#specialText {
color: red;
/* Overrides the paragraph color */
font-size: 20px;
}
</style>This is a regular paragraph.
This paragraph has overridden styles using an ID selector.
`