The class name is the same, but the tag name is different. I only want to call one. How to call it in CSS

The class names are the same, but the tag names are different. I only want to call one. How do I call it with CSS?

In front-end development, we often encounter situations where multiple tags use the same class name, but we want to style only one of them. This requires using CSS selectors to precisely target the element we need.

Basic Concepts of CSS Selectors

In CSS, selectors are used to select elements on a page and then apply styles to those elements. Commonly used selectors include the following:

Class Selectors

Class selectors begin with a dot (.) followed by the class name. For example, .button selects all elements with the class button.

Tag Selectors

Tag selectors use the tag name directly as the selector. For example, div selects all <div> tags.

Descendant Selectors

Descendant selectors use spaces to indicate relationships between elements and are used to select all descendant elements that meet the criteria. For example, .container a selects all tags under elements with the class container.

Pseudo-class Selectors

Pseudo-class selectors are used to add special effects to certain selectors. For example, :hover specifies the style of the selector when the mouse hovers over it.

Problem Analysis

Suppose we have the following HTML structure:

<div class="box">Box 1</div>
<p class="box">Box 2</p>

Now we want to select the first <div> element, but since it and the second <p> element have the same class name, box, we can’t use a class selector directly. Instead, we can combine class selectors with tag selectors to achieve our goal.

Solution

We can use a combination of class selectors and tag selectors to select only the desired tags. Here’s how to do it:

.box {
color: red;
}

.box:not(p) {
color: blue;
}

In the CSS code above, we first use the .box class selector to set the text color of all elements with the box class to red. We then use the :not() pseudo-class selector to set the text color of all elements with the .box class selector, except for the <p> tag, to blue.

This selects only the first <div> element without affecting the second <p> element.

Running Results

If we apply the above CSS code to the HTML structure mentioned above, the text color of the first <div> element will change to red, while the text color of the second <p> element will remain the default color. This effectively selects only the first element.

This method helps us solve the problem of selecting only one element among elements with the same class name but different tags on a page, improving the precision and flexibility of CSS.

In general, during development, the appropriate combination of CSS selectors can better customize and adjust page styles, allowing us to more easily control the appearance and style of page elements.