CSS id and class selector

id selector
class selector

If we need to indent the first line for all paragraphs or change the color of all the headings of the first level, then we will use the type selector:

/*Set the first line indent for all paragraphs*/
p {text-indent: 25px;}

/*Change the color of all the headings of the first level to green*/
h1 {color: green;}

CSS type selector is a selector that sets the style for all tags with the given name. In styles, the tag name is used as the selector in this case.

But what if we do not need to change the color for all <h1> headers, but only for one or two? CSS gives us with this possibility. Using the id and class selector, we can apply the style to the elements regardless of their names.

id selector

CSS id (identifier) selector is designed to apply the style to unique elements on the web page. The uniqueness of the element means that an element with this design will be used only once on the page. In the role of such elements can be: site header, footer, navigation menu, etc.

To use the id selector, you need to create an identifier (id), having invented a unique name for it, and assign it in the id attribute of the element to which the style will be applied. In the CSS code, the id selector starts with a # character immediately followed by the name of the identifier.

Each identifier can appear on the page only once, i.e. a specific id must be used on the page only with the tag for which it is intended. If the same identifier is applied to more than one element, first the HTML code does not pass the validation, secondly it can cause incorrect code processing by the browser and you can see the wrong result that was expected.

An example of how the id selector works:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      #para1 {
        text-align: center;
        color: red;
      } 
    </style>
  </head>

  <body>
    <p id="para1">Welcome!</p>
    <p>This style will not be applied to this paragraph.</p>
  </body>
</html>

Try it »

Примечание: do not give the identifiers names beginning with numbers, they will not work in the Mozilla Firefox browser.

class selector

The CSS class selector also allows the id selector to stylize a particular page element, but unlike the id, the class selector allows you to apply your style to multiple elements on a web page, not just one.

To use the class selector, you need to specify which tag on the page you want to apply it to, just add the class attribute to the HTML tag that you want to style and specify the desired class name as the value.

Rules for class names:

in CSS code, all the designation selectors of a class must begin with a dot, using it's browsers recognize the class selector in the CSS style sheet
in the class name, only letters, numbers, hyphens and underscores are allowed
the class name after the dot must always begin with a letter
class names are case sensitive, for example .Menu and .menu will be treated in CSS as two different classes

CSS code for classes is no different from CSS code for other selectors. After the class name comes is a declaration block with all the necessary properties:

.menu {
  color: #33CCFF;
  font-family: sans-serif;
}

If the class attribute, with the same name, is added to several different tags, and you need the style to be applied only to certain tags, then in the selector before the class name, you must specify the tag to which the style should be applied:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      p.center { text-align: center; }
    </style>
  </head>

  <body>
    <h1 class="center">The style will not be applied.</h1>
    <p class="center">The paragraph will be centered.</p> 
  </body>
</html>

Try it »

As you already noticed from the example, you do not need to write a dot before the class name in HTML code (in the value of the class attribute). It is only required in the designation of the selector in the style sheet.

With this theme look: