CSS #id Selector

Description

The CSS ID selector is used to select a single, unique element on a web page. It is the most specific type of selector, and it is used by targeting the element's id attribute.

To use the ID selector, simply write a hashtag (#) character, followed by the element's id attribute value. For example, to select the element with the id attribute value of my-id, you would use the following selector:

#my-id {
  /* CSS styles go here */
}

You can use the ID selector to style any element on a web page, including headings, paragraphs, images, and links. It is a very powerful selector, and it is often used to create unique and custom styles for specific elements on a page.

Here is an example of how to use the ID selector to style a heading:

<h1 id="my-heading">This is my heading</h1>

#my-heading {
  color: red;
  font-size: 36px;
}

This CSS will style the heading with the id attribute value of my-heading to be red and 36 pixels in size.

The ID selector is a very important and useful CSS selector. It is used to select and style specific elements on a web page with great precision.

Syntax

#id {
    css declarations;
} 

Example

#list {
   color: #3366ff;
   background: #ffff99;
}

In this example, the elements with the id #list will have their color and background styles changed.

Give it a Try

Click the button below to experiment with this selector.

Give it a Try!

Browser Support

The following table will show you the current browser support for the CSS id selector.

Desktop
Yes	Yes	Yes	Yes	Yes

Tablets / Mobile
Yes	Yes	Yes	Yes	Yes	Yes