ID Selector in CSS - Scientech Easy

An id selector in CSS is an unique identifier that selects an HTML element whose id attribute’s value matches the selector. It uses the id attribute value of an element to select a single HTML element.

The value of id attribute must be unique within an HTML document or web page so that the id selector can select one unique element.

To create an id selector, write with a hash or pound sign (#) followed by the element’s id attribute value and then define the style rules within curly braces ({ }). The general syntax to create an id selector in CSS is as follows:

#idname {
     property1: value1;
     property2: value2;
  /* More properties and values */
}

In the above syntax, a hash symbol (#) denotes that you are defining an ID selector. The idname specifies the value of an element’s id attribute you want to target a specific element with it. In curly braces, we have defined the CSS properties and their values.

The ID selector (#idname) will target an element whose id attribute value is “idname” and then will apply the specified style rules. Analogous to class name, an id name cannot also start with a number. It cannot contain spaces and should start with a letter.

However, you can include letters, numbers, hyphens, and underscores in the id name for compatibility with the older browsers. Some of the examples of valid ID names are as follows:

myElement
header-section
footer_section
main1Content

Some examples of invalid ID names are as:

1stElement (starts with a number)
my Element (contains a space)
#section (starts with a hash symbol)

Basic Example of CSS ID Selector

Consider an HTML element whose id attribute value is header.

<div id="header">
     <h1>Welcome to Scientech Easy</h1>
</div>

To style this div element using the ID selector, you can write the following CSS:

#header {
    background-color: #f0f0f0;
    color: #333;
    padding: 20px;
    text-align: center;
}

In this example, the id selector “#header” will target the div element with the id attribute value “header” and apply the specified style rules. Look at the complete HTML code.

Example 1:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Id Selector Example</title>
<style>
#header {
    background-color: #f0f0f0;
    color: #333;
    padding: 20px;
    text-align: center;
}
</style>
</head>
<body>
   <div id="header">
       <h1>Welcome to My Website</h1>
   </div>
</body>
</html>

In this example, the ID selector #header targets the div element with the ID attribute value “header” and applies the specified CSS styles.

Example 2:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Id Selector Example</title>
<style>
#earth {
    background-image: url(earth.png);
}
</style>
</head>
<body>
    <div class="plaent" id="earth">
        <h2>Earth: Our Home</h2>
    </div>
</body>
</html>

As there’s only one Earth in our solar system, Earth lends itself as a good realtime example to understand the concept of an ID selector. Just like there is only one Earth in the solar system, you can use the ID name “earth” only once on one element in an HTML document.

If you define an ID name more than once in an HTML document, the browser won’t know which element you are linking to or referring to from JavaScript.

Generally, the browser will select only the first element with that ID. Therefore, it’s important to use an ID name for its intended purpose, which uniquely identifies a single element in the document. Always use each ID name only once per HTML document or web page.

Here’s an example to illustrate this point:

Incorrect Usage:

<div id="header">Header 1</div>
<div id="header">Header 2</div>

In this case, both div elements have the same ID, which can cause confusion and unpredictable behavior for the browser.

Correct Usage:

<div id="header">Main Header</div>
<div id="subheader">Sub Header</div>

In this correct example, each div has a unique ID, making it clear which element is being referred to in CSS or JavaScript.

#header {
    font-size: 24px;
    color: blue;
}

#subheader {
   font-size: 20px;
   color: green;
}

const header = document.getElementById('header');
header.style.backgroundColor = 'yellow';

const subheader = document.getElementById('subheader');
subheader.style.backgroundColor = 'lightgrey';

Advanced Examples based on ID Selector

ID selectors are particularly useful for styling form elements with unique identifiers. Here is an example based on it.

Example 3:

<!DOCTYPE html>
<html>
<head>
    <title>Styling Form Elements using ID Selectors</title>
<style>
#username, #password {
   display: block;
   margin: 10px 0;
   padding: 8px;
   border: 1px solid #ccc;
   border-radius: 4px;
}

#loginButton {
   background-color: #4CAF50;
   color: white;
   padding: 10px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}
</style>
</head>
<body>
<form>
   <label for="username">Username:</label>
      <input type="text" id="username">
   <label for="password">Password:</label>
      <input type="password" id="password">
   <button id="loginButton">Login</button>
</form>
</body>
</html>

Output:

Combining ID Selector with Other Selectors

We can combine the ID selector with other selectors to target a specific element with more precision. This is especially useful for applying styles to elements within a specific accuracy. Let’s understand it with some examples of how we can combine CSS ID selector with other selectors.

Combining ID Selector with Class Selector

In CSS, we can combine an ID selector with a class selector to style an element with a specific class that is inside an HTML element with a specific ID. Here is an example based on it.

Example 4:

<div id="content">
    <p class="highlight">This is a highlighted paragraph within the content.</p>
    <p>This is a normal paragraph within the content.</p>
</div>

#content .highlight {
    background-color: yellow;
    font-weight: bold;
}

In this example, we have combined the ID selector #content with the class selector .highlight. This will target only the paragraphs with the class highlight inside the element with the ID content, applying CSS style rule such as a yellow background and bold text.

Combining ID Selector with Element Selector

We can also combine an ID selector with an element selector to target a specific type of element within an element with a particular ID attribute value. Look at the below example code.

Example 5:

<div id="main">
<h1>Main Heading</h1>
<p>This is a paragraph in the main section.</p>
<p>This is another paragraph in the main section.</p>
</div>

#main p {
    color: blue;
    line-height: 1.5;
}

In this example, we have combined an ID selector #main with an element selector p. This will target all p elements within the element with the ID attribute value main, and change their text color to blue and adjusting the line height.

Combining ID Selector with Pseudo-Classes

CSS allows us to combine an ID selector with pseudo-classes to apply styles based on the state of an element. Here’s an example below.

Example 6:

<div id="nav">
     <a href="#home" class="menu-item">Home</a>
     <a href="#about" class="menu-item">About</a>
     <a href="#contact" class="menu-item">Contact</a>
</div>

#nav .menu-item:hover {
   color: red;
   text-decoration: underline;
}

In this example, we have combined the ID selector #nav with the class selector .menu-item and the pseudo-class :hover. This will select an element with the class menu-item inside the element with the ID nav, and apply style rules when the user hovers over these links. It will change their color to red and adding an underline.

Combining ID Selector with Attribute Selectors

We can also combine an ID selector with attribute selectors to select elements with specific attributes within a specific element. Here’s an example to understand it better.

Example 7:

<div id="form-section">
    <input type="text" placeholder="Enter your name" required>
    <input type="email" placeholder="Enter your email" required>
</div>

#form-section input[required] {
    border: 2px solid green;
}

In this example, we have combined the CSS ID selector #form-section with an attribute selector [required]. This selector will select all input elements with the required attribute within an element with the ID form-section.

Thus, combining ID selectors with other selectors in CSS can help you to create more specific and targeted CSS selector that we can apply to style a more specific element within the HTML document.

Best Practices for Using ID Selectors

In this section, we have listed some key points that you should keep in mind before using id selector in CSS. They are:

The value of id attribute should be unique within a page. The same id cannot be used for multiple HTML elements.
Use id selectors for those elements that need unique styles. For reusable styles, prefer class selectors.
Choose descriptive and meaningful id attribute value to improve code readability and maintainability.
Avoid Overuse of id selectors. Use them sparingly.
Combining multiple ID selectors can be difficult to manage.
Avoid using inline styles as they can override CSS rules.