In the previous lesson on CSS Syntax,
you learned about basic element selectors
(which are also called type selectors).
There are other types of selectors you can use if you want
to do more than select all elements of a certain type.
ID selectors allow you to select and style one specific
item in a document by a unique ID. Note that you should
use ID selectors sparingly, as they're not as re-usable
and modular as other kinds of selectors.
Pre-Requisites
Make sure that you've worked through the previous
tutorial, CSS Syntax
before proceeding through this lesson.
ID Selectors
ID selectors can be used when you want to style only a single
element in a page. For example, you might want to style all
paragraphs with a certain font styling, and one particular
paragraph with a yellow background.
An ID selector uses a CSS Identifier.
CSS Identifiers are assigned to an element using the
id="" attribute in the element's opening tag.
CSS Identifers are used for more than just CSS (i.e. JavaScript)
and they always follow the same naming conventions:
CSS Identifiers must be in lower-case letters only, and should
use a hypen to separate words in the identifier.
Examples of correct, standard CSS Identifiers include
page-heading, background-color,
highlight, and dfn-css-id.
Later, you'll notice that CSS properties also follow this
standard.
ID selectors in your CSS code start with a # sign.
Note that you don't use the # sign in the id=""
value, only inside your CSS code when you're defining a
CSS rule using an ID selector. For example, if you have some
HTML code defined as:
<aside id="note">...</aside>
You can create a CSS rule using an ID selector for the
element with id="note":
#note {
background-color: yellow;
color: navy;
}
ID selectors are used when you want to style only one specific item
on the page. You need to include the id=""
attribute on the HTML element you want to style.
The example above looks for
an HTML element with an id attribute value of "note". Since
an id="" value must be unique, this will select and style
exactly one element, regardless of the element name/type.
In this case, this rule will style our <aside id="note">
that we defined earlier.
This element will be styled according to the styles defined in
the #note rule (yellow background and navy text).
Here's a CodePen.IO example that uses an ID selector to
style one of the <strong> elements in the page.