Note sure what CSS is? Check out our “What is CSS?” post.
Along with CSS classes, the ID selector is one of the two most common ways CSS is used for styling HTML elements. While a class can be attached to multiple HTML elements to paint more broad styling strokes, an ID is attached to only a single HTML element per page, and therefore much more specific. By HTML standards, we shouldn’t have more than one element on a page with the same id, so ID selectors in CSS style only one element.
The ID selector’s name and the HTML element’s id attribute will have the same name.
If we are using a style that should apply to multiple elements, we would want to use a CSS class selector instead, which can target multiple elements on the same page.
An ID selector is easy to spot in CSS code because it will start with a pound (#) sign. Take the following example:
Now, if we create an HTML element in our webpage that has an id=”myLink” attribute, the styles above will automatically be applied to that element. Let’s make this HTML element and see what happens!
<a id="myLink" href="http://www.webdevaddict.com">Homepage</a>
See what happened? Since our CSS ID and HTML id attributes are both named “myLink“, our CSS rule has been applied as expected! Pretty easy right?
Just remember – it’s proper to only have unique HTML id names. If you need to apply a style rule to more than one element, use a CSS class instead!
Check out the codepen here if you’d like to play around. If you have any questions, please feel free to leave them in the comments below. Happy coding, webdevaddicts.