ID selector

IDs are used to uniquely identify and style elements in HTML. They provide a more specific way of selecting elements compared to class selectors. An ID selector is represented by the hash symbol (#) followed by the ID name.

Syntax

1#elementID {
2  property: value;
3}

Example

1<div id="header">
2  <h1>Welcome to my website</h1>
3</div>

1#header {
2  background-color: #333;
3  color: #fff;
4  padding: 10px;
5}

In the above example, we selected the div element with an ID of header and applied a background color of #333, white text color, and a padding of 10px.

IDs are unique, so they should only be used once per HTML document. Using the same ID multiple times can lead to invalid HTML, and the styles applied may not behave as expected.

IDs selectors have higher specificity compared to type and class selectors. But be careful with the overuse of IDs in your CSS, as it can lead to specificity issues and make it difficult to style elements in the future.