search
HomeWeb Front-endCSS TutorialWhat is the difference between id selector and class selector in css

Previous article "What is CSS syntax?" Detailed introduction to usage methods and rules》Introduces the usage methods and rules of CSS syntax. The following article will take you to understand the id selector and class selector in CSS and introduce their differences. Come and learn together! !

What is the difference between id selector and class selector in css

Introduction to id selector and class selector

How to use html elements in CSS Style control is accomplished through CSS selectors. The two most commonly used selectors are the id selector and the class selector.

1. id selector

The id selector can specify a specific style for HTML elements marked with a specific id.

1, id selector is defined with "#" and starts with

#1) The id selector is defined with "#"

The following two id selectors, the first one can define the color of the element as red, and the second one can define the color of the element as green:

#red {color:red;}
#green {color:green;}

In the following HTML code, the p element with the id attribute red is displayed in red, and the p element with the id attribute green is displayed in green:

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

2) The id selector is based on #Starts with

The id selector can specify a specific style for HTML elements marked with a specific id.

The HTML element uses the id attribute to set the id selector, and the id selector in CSS is defined with "#".

For example:

1. #para1
2. {
3. text-align:center;
4. color:red;
5. }

2. Class selector

1. The class selector is Display

with a dot "

.

". The class selector is used to describe the style of a group of elements, class Selectors are different from id selectors, and class can be used in multiple elements. The

class selector is represented by the class attribute in HTML, and in CSS, the class selector is displayed with a dot ".".

For example:

In the following example, all HTML elements with the center class are centered.

<html>
<head>
<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 id="标题居中">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

Rendering:

What is the difference between id selector and class selector in css

You can also specify specific HTML Elements use classes.

For example:

In the following example, all p elements use to center the text of that element.

<html>
<head>
<style>
p.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 id="这个标题不受影响">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>
</html>

Rendering:

What is the difference between id selector and class selector in css

class selector can be used by multiple html elements, because the element The class attribute is not necessary to ensure uniqueness. Another html element can also have multiple class attribute values, and the values ​​are separated by ",". For example, <p class="cls1,cls2"></p> is OK.

The most basic difference between id and class

  • The prefix symbol "#" should be added in front of id, and the prefix symbol "#" should be added in front of class The prefix symbol "

    .
  • " should be added.
  • The id attribute can generally only be used once in a page, while class can be referenced multiple times.
  • id is used as a tag of an element to distinguish different structures and contents, while class is a style that can be applied to any structure and content.
  • In terms of layout ideas, we generally adhere to this principle: id determines the structure and content of the page first, and then defines the style for it: on the contrary, class defines a class first Styles, and then apply class styles to different elements and content on the page as needed.
  • ###Currently, browsers allow multiple IDs with the same attribute value to appear on the same page. Under normal circumstances, they can be displayed normally, but when using JavaScript to control elements through IDs An error will occur. ###
  • In actual application, class is more used in text sections and page decorations, while id is more used to implement grand layouts and design containing blocks, or styles of containing boxes.

Summary: In CSS, the id selector and class selector are used to add color to elements. They make our entire page colorful.

Note

  • ID attribute should not start with a number. IDs starting with numbers will not work in Mozilla/Firefox browsers

  • The ID attribute can only appear once in each HTML document

  • The first character of the class selector cannot use numbers! It won't work in Mozilla or Firefox

  • Be careful

Recommended learning:CSS video tutorial

The above is the detailed content of What is the difference between id selector and class selector in css. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricks@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingCSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Modern Scroll Shadows Using Scroll-Driven AnimationsModern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AM

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

Revisiting Image MapsRevisiting Image MapsMay 07, 2025 am 09:40 AM

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.

State of Devs: A Survey for Every DeveloperState of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AM

The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more. 

What is CSS Grid?What is CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools