CSS id selector

The CSS id selector starts with "#" and is used to select HTML elements with specific id attributes.

In HTML documents, each id should be globally unique, that is, each id can only be used for one element. Therefore, in CSS, the id selector has higher priority than the class selector and tag selector.

Use the id selector to quickly locate and select specific elements and apply styles to them. For example, here is an example of using an id selector to set the color of an element:

#myid {
    
    
  color: blue;
}

In HTML, use the id attribute to specify the id of an element, for example:

<p id="myid">This text will be blue.</p>

In this example, #myidit's the CSS id selector that selects the HTML element with the id "myid" and sets its text color to blue.

In modern layouts, id selectors are often used to create derived selectors, which select elements based on their hierarchy. For example, the following style will only apply to paragraphs that appear within an element with the id of sidebar:

#sidebar p {
    
    
  font-style: italic;
  text-align: right;
  margin-top: 0.5em;
}

In this example, #sidebar pa derived selector that selects all paragraphs within the element with id "sidebar" and sets its font style to italic, text alignment to right, and top margin to 0.5em .

Example

Here is an example of an HTML file containing styles using the CSS id selector:

<!DOCTYPE html>
<html>
  <head>
    <title>CSS ID Selector Example</title>
    <style>
      #myid {
      
      
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p id="myid">This is a paragraph.</p>
  </body>
</html>

The effect is as follows:
Insert image description here

In this example, we <style>have defined an id selector in the tag #myidthat will select the HTML element with the id "myid" and set its text color to blue. In <body>the tag, we use <p id="myid">to specify the id of a paragraph as "myid", so the text color of this paragraph will be set to blue.

CSS class selector

The CSS class selector is used to describe the style of a group of elements that can have the same class value. In HTML, the class attribute is used to specify the class value of an element, while in CSS, the class selector is represented by a dot (.) symbol.

Using the class selector, you can add the same style to a group of elements. For example, the following code sets all HTML elements with the center class to center alignment:

.center {
    
    
  text-align: center;
}

In HTML, you can <h1 class="center">specify a center-aligned title element using:

<!DOCTYPE html>
<html>
<head>
  <meta charset="gb2312">
  <title>Class Selector Example</title>
  <style>
    .center {
      
      
      text-align: center;
    }
  </style>
</head>
<body>
  <h1 class="center">Title</h1>
  <p class="center">This is a centered paragraph.</p>
</body>
</html>

The effect is as follows:
Insert image description here

In this example, <h1 class="center">and <p class="center">specify a heading and a paragraph elements respectively, and apply the center alignment style.

Differences and similarities between CSS id and class

The differences and similarities between the css id selector and class selector are as follows:

the difference:
- Number of applications : In an HTML document, the id selector can only be referenced once, while the class selector can be referenced multiple times. This means you can assign an id to an element, but not multiple ids. At the same time, you can assign the same class to multiple elements.
- Usage scenarios : If you need to uniquely select elements in a page, or you need to create strong associations for elements in CSS and JS, you should use the id selector. For example, if you want to directly manipulate a specific element in JavaScript, using an id is a better choice. If you need to classify and select elements with the same style, or if you want to implement high-priority styles, you should use the class selector. For example, if you want all paragraph text to be blue, you can apply the class to all paragraphs that need to change color.
Same point:
- Whether it is an id selector or a class selector, they are both a type of CSS selector, used to specify the HTML elements to which styles are applied.
- Whether it is id or class, they can exist in HTML elements through attributes and are used to specify the style of the element.

In general, id and class are important CSS concepts. They can both be used to specify the style of HTML elements, but there are obvious differences in their usage times and application scenarios.

CSS Id and Class selectors

Article directory

CSS id selector

Example

CSS class selector

Differences and similarities between CSS id and class

Guess you like