CSS class selector and ID selector

IDs are used to identify specific elements on a page, such as site navigation, and must be unique .

IDs can also be used to identify persistent structural elements , such as dominant navigation or content areas .

The ID can also be used to identify a one-time element , such as a link or table element .

An ID can only be applied to an element on the page.

The same class name can be applied to any number of elements on the page, so the class is much more powerful. Class is well suited for representing the type of content or other similar entries . For example, there is a news page that contains several news articles, as shown in the code below

    <DivID= "Story-id-1">        <H2>Id</H2>        <P>IDs are used to identify specific elements on a page, such as site navigation, and must be unique. IDs can also be used to identify persistent structural elements, such as dominant navigation or content areas. IDs can also be used to identify one-time elements, such as a link or form element.        An ID can only be applied to an element on the page. </P>    </Div>    <DivID= "Story-id-2">        <H2>Class</H2>        <P>the same class name can be applied to any number of elements on the page, so the class is much more powerful.        Class is well suited for representing the type of content or other similar entries. </P>    </Div>

Instead of assigning a different ID to each piece of news, you can assign a class name news to all the stories.

<Divclass= "News">        <H2>Id</H2>        <P>IDs are used to identify specific elements on a page, such as site navigation, and must be unique. IDs can also be used to identify persistent structural elements, such as dominant navigation or content areas. IDs can also be used to identify one-time elements, such as a link or form element.        An ID can only be applied to an element on the page. </P>    </Div>    <Divclass= "News">        <H2>Class</H2>        <P>the same class name can be applied to any number of elements on the page, so the class is much more powerful.        Class is well suited for representing the type of content or other similar entries. </P>    </Div>

When assigning IDs and class names, be sure to keep the names independent of how you want them to behave. For example, if you want all form notification messages to appear in red, you can assign them the class name red. This is fine as long as there are no other red elements on the page. However, if you also want to make 4 of the required form labels appear in red, you must guess what kind of element the class refers to, and the situation is a bit confusing. Imagine how confusing the code would be if you were using expressive elements throughout your site. If you decide to change the form notification from red to yellow, it's more complicated. In this case, all class names must be modified, otherwise the element named Red will be displayed in yellow.

Therefore, you should name the elements according to what they are , rather than naming them according to what they look like, which makes the code more meaningful and avoids the code from being out of sync with the design. For the previous example, instead of assigning the class name red to the notification, you should assign a more meaningful name, such as. warning or. Notification. The great advantage of meaningful class names is that they can be reused throughout the site. For example, you can also use the. Notification class on other types of messages to apply a completely different style depending on where they are located in the document.

The name of the difference	A good name
Red	Error
Leftcolumn	Secondarycontent
Topnav	Mainnav
Firstpara	Intro

CSS class selectors and ID selectors allow you to specify styles in a way that is independent of the document elements, both of which are case-sensitive, preferably with a fully lowercase class name and ID, and multiple words separated by hyphens, for example, Andy-budd is much clearer than Andybudd.

ID or class?

I believe you have been like me, it is often difficult to decide whether an element should use an ID or a class name. As a general rule, classes should be applied to conceptually similar elements that can appear in multiple locations on a page , and IDs should be applied to different unique elements .

The ID is recommended only if the target element is very unique and will never be used elsewhere on the site for this name. In other words, you should use the ID only if you are absolutely sure that the element will only occur once, if you think you might want similar elements later, just use the class.

The final summary differences are as follows:

First: Within the same page, ID objects with the same name are not allowed to appear, but class with the same name is allowed

Second: When the page is used to JS or to dynamically invoke the object, you need to use the ID (of course, the class will be used, but the ID is more commonly used).

Third: The ID selector cannot be used in combination, class can be used alone, or it can be used in conjunction with other elements.

Four: Class has a multi-class selector, the ID selector is none, such as

<class= "Important warning">Thisparagraph is a very important Warning. </ P >

CSS class selector and ID selector