Html what is class and id

Type, class, and ID selectors

In this lesson, we examine some of the simplest selectors, which you will probably use most frequently in your work.

Prerequisites:	Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective:	To learn about the different CSS selectors we can use to apply CSS to a document.

Type selectors

A type selector is sometimes referred to as a tag name selector or element selector because it selects an HTML tag/element in your document. In the example below, we have used the span , em and strong selectors.

Try adding a CSS rule to select the element and change its color to blue.

The universal selector

The universal selector is indicated by an asterisk ( * ). It selects everything in the document (or inside the parent element if it is being chained together with another element and a descendant combinator). In the following example, we use the universal selector to remove the margins on all elements. Instead of the default styling added by the browser — which spaces out headings and paragraphs with margins — everything is close together.

This kind of behavior can sometimes be seen in «reset stylesheets», which strip out all of the browser styling. Since the universal selector makes global changes, we use it for very specific situations, such as the one described below.

Using the universal selector to make your selectors easier to read

One use of the universal selector is to make selectors easier to read and more obvious in terms of what they are doing. For example, if we wanted to select any descendant elements of an element that are the first child of their parent, including direct children, and make them bold, we could use the :first-child pseudo-class. We will learn more about this in the lesson on pseudo-classes and pseudo-elements, as a descendant selector along with the element selector:

article :first-child  font-weight: bold; > 

However, this selector could be confused with article:first-child , which will select any element that is the first child of another element.

To avoid this confusion, we can add the universal selector to the :first-child pseudo-class, so it is more obvious what the selector is doing. It is selecting any element which is the first-child of an element, or the first-child of any descendant element of :

article *:first-child  font-weight: bold; > 

Although both do the same thing, the readability is significantly improved.

Class selectors

The class selector starts with a dot ( . ) character. It will select everything in the document with that class applied to it. In the live example below we have created a class called highlight , and have applied it to several places in my document. All of the elements that have the class applied are highlighted.

Targeting classes on particular elements

You can create a selector that will target specific elements with the class applied. In this next example, we will highlight a with a class of highlight differently to an heading with a class of highlight . We do this by using the type selector for the element we want to target, with the class appended using a dot, with no white space in between.

This approach reduces the scope of a rule. The rule will only apply to that particular element and class combination. You would need to add another selector if you decided the rule should apply to other elements too.

Target an element if it has more than one class applied

You can apply multiple classes to an element and target them individually, or only select the element when all of the classes in the selector are present. This can be helpful when building up components that can be combined in different ways on your site.

In the example below, we have a that contains a note. The grey border is applied when the box has a class of notebox . If it also has a class of warning or danger , we change the border-color .

We can tell the browser that we only want to match the element if it has two classes applied by chaining them together with no white space between them. You’ll see that the last doesn’t get any styling applied, as it only has the danger class; it needs notebox as well to get anything applied.

ID selectors

An ID selector begins with a # rather than a dot character, but is used in the same way as a class selector. However, an ID can be used only once per page, and elements can only have a single id value applied to them. It can select an element that has the id set on it, and you can precede the ID with a type selector to only target the element if both the element and ID match. You can see both of these uses in the following example:

Warning: Using the same ID multiple times in a document may appear to work for styling purposes, but don’t do this. It results in invalid code, and will cause strange behavior in many places.

Note: As we learned in the lesson on specificity, an ID has high specificity. It will overrule most other selectors. In most cases, it is preferable to add a class to an element instead of an ID. However, if using the ID is the only way to target the element — perhaps because you do not have access to the markup and cannot edit it — this will work.

Summary

That wraps up Type, class, and ID selectors. We’ll continue exploring selectors by looking at attribute selectors.

Found a content problem with this page?

This page was last modified on Jun 30, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

HTML/CSS Class and ID Selectors: Everything You Need to Know

In this introductory tutorial on HTML/CSS Class and ID Selectors, we will dive into some creative examples providing valuable insight into the power of these Selectors to give unlimited ability for web design.

HTML and CSS Interplay

CSS stands for “Cascading Style Sheet” and is used in conjunction with HTML (Hypertext Markup Language) as a powerful tool for creating web design and layout. The HTML uses the CSS attributes id and class to add any number of styles to enhance your web environment.

ID vs. Class: What You Need to Know

Although they have similar functions, they are not the same and do not always share the same purpose.

ID’s are unique

• Each element can have only one ID.
• Each ID can have an unlimited amount of Styles applied to it.
• Each page can have only one element with that ID.
• IDs use “#” in the CSS which can also be used as an identifier for HTML “Jump Links” (hyperlinks). This allows you to jump from one place to another on the same web page and can also be used in creating a well-designed Table of Contents.

Below is an example of the ID used in the CSS area of the HTML:

#top background-color: #ccc; padding: 20px >

Classes are not unique

• You can use the same Class on multiple elements.
• Class naming is case sensitive.
• Classes use a “.” in front of the name in the CSS as seen in the illustration below.
• Each Class can have an unlimited amount of Styles applied to it.
• You can use multiple classes on the same element.

Below is an example of a Class used in the CSS area of the HTML:

.introduction color: red; font-weight: bold; font: 20px Arial, Helvetica, sans-serif; >

Helpful Hint #1: Designing Your Web Content

The following example displays an entire HTML web page incorporating the ID and Class selectors.

The following example is the resulting web output:

Helpful Hint #2: Using the ID Selector to Create Jump Links

In the following example, we illustrate the effective behavior of the ID selector to build a hyperlinked Table of Contents. Remember that the web is not a static environment like hard copy pages. Utilizing the ability to hyperlink with Jump Links gives your web users ease of use.

The following is an actual HTML page with code that you can copy.

#locator background-color: yellow;
color: black;
padding: 10px;
text-align: left;
>

<p>Ehendis el molupta tendign ihicaes tibus.Occus di consecatem laciendit ero oditate consedi gniste porporit, quiam ut eatas et inus sit adipient ut qui dunt alique prae. Facerrupta ad quatia aut et autatur, num quam qui quidusa mustotaqui dis qui ressi quaersperor magnimporat perchillam, eniam.p>

The following illustration provides information on the code displayed above. From this illustration, you can see the relationship of the two code sections that talk to each other in order to form the Jump Link.

Helpful Hint #3: Using the Class Selector in Multiple Elements

For this section, we want to show how you can use a Class name in multiple places to repeat a theme on your web page. Once you have given the styles to that class name, you can use it as often as you like.

Tip: The Class name can be named with any name you want to use. We suggest using an intuitive and logical naming convention that helps to identify the content. This in turn becomes a content identifier and helps to lay out your code in a well structured format.

Remember the difference between Class and ID: A Class name can be used by multiple HTML elements, while an ID name must only be used by one HTML element within the page.

The following is a sample HTML page using the Class name GreekCity. You can copy code from this to try it out yourself.

The following illustration identifies the areas we discussed in this section:

The following example is the resulting web output:

Outro: Where to Next?

This introduction to Class and ID selectors should provide a starting point for further inquiry into the unlimited creative aspects that HTML offers. We will continue to explore other areas of HTML design in the next blog. We hope this introduction has piqued your interest and inspired you to explore further and dive deeper into the world of web design.

Источник

What is the difference between class and id in HTML, CSS and JavaScript

What is the difference between class and id attributes? That kind of question is quite common in technical interviews for Front-end developers, especially for beginners.

Both class and id are HTML attributes that can be assigned to any HTML tag. They can be used and manipulated in HTML, CSS, and JavaScript.

Difference between class and id in HTML

Each HTML element can have an id and a class attribute, however, the differences are:

1. The id’s value must be unique in the whole document. As for the class, the value can be the same for multiple elements.
2. The id’s value must not contain whitespace (spaces, tabs, etc.), while the class attribute allows space-separated values

 id="main-heading" class="text heading-text">Main heading  class="text">Some text 

NOTE: both class and id can contain letters, numbers, dashes, and underscores, but the first character should always be a letter.

Difference between class and id in CSS

In CSS the minor difference between class and id is that they have special characters preceding the name. For id, it is pound ”#” for class it is period ”.”:

#main-heading  font-size: 45px; > .text  color: #333; > 

The main difference between class and id in CSS is that they have different selector specificity. The id has a higher specificity than a class.

E.g. looking at the following code, the id selector will override the class selector styles, even if the class selector is cascading after the id selector.

#main-heading  color: #000; > .text  color: #333; > 

It is considered a good practice to use classes to style elements, not the ids. One of the reasons for this, that it is easier to override a class selector than an id.

Difference between class and id in JavaScript

There’s not much difference between id and class in JavaScript. They are mostly used to select DOM elements and to access their values.

In JavaScript, you can select elements by their class name or by id. There are different ways how you can utilize classes and id to select DOM elements.

To select the element by id you can use:

1. document.getElementById(‘elementId’) method;
2. document.querySelector(‘#elementId’) method;
3. window.elementId or window[‘element-id’] if the id is using a dash.

To select the element by the class you can use:

1. document.querySelector(‘.elementClass’) method;
2. document.getElementsByClassName(‘elementClass’) method;

To access the id attribute value of the element you can use the following approaches:

To access the class value of the element you can use the following approaches:

1. Element.classList — will output class string
2. element.className — will output class string
3. element.getAttribute(‘class’) — will output class string

Источник