How to Use a CSS ID Selector
By Stephen Bucaro
A CSS id selector, which uses the pound sign (#), can be used to select one, and only one
html element on a webpage (the element with its id attribute set to the same name
as the name after the Id selector). Shown below is html code for a div with its id
attribute set to "appbtn".
<div id="appbtn">This box was styled by the id selector #appbtn</div>
The id for an html element cannot begin with a number or a hyphen followed by a number.
The id cannot contain spaces, and the only punctuation characters allowed are the hyphen
(-) and the underscore (_).
Shown below is a CSS declaration block that uses the id selector to select and apply style
rules to the element with its id attribute set to "appbtn".
box-shadow: 6px 6px 4px #a0a0a0;
Note: If you need to apply the same set of style rules to multiple html elements, even to
dissimilar elements, you should use a class selector. The class selector uses a dot (.)
in front of the name instead of a pound sign, and the html element to receive the class
used the class attribute rather than the id attribute.
More CSS Quick Reference:
• Set a Fixed Background Image
• Set List Properties
• Set the Border Color
• Set a Background Image
• Set an Element's Visibility
• Set an Element's Overflow
• Use Image for List Item Bullets
• Set the border-collapse
• How to Use a CSS ID Selector
• Set a Background Image's Position