CSS: How Do You Select Elements with Class Name test?

When styling web pages, one of the most common tasks is applying CSS to specific HTML elements using class selectors. If you want to target elements that have the class test, CSS offers a simple and effective way to do it.

In this article, you’ll learn how to select and style elements with the class name test, and explore advanced usage with examples.

Table of Contents

✅ Basic Syntax

To select elements with a class of test, use a dot (.) followed by the class name in your CSS:

.test {
  /* your styles here */
}

This rule applies styles to all elements that have the test class.

🧾 Example 1: Basic Usage

📌 HTML:

<div class="test">This is a test div</div>
<p class="test">This is a test paragraph</p>

📌 CSS:

.test {
  color: white;
  background-color: blue;
  padding: 10px;
}

✅ Result:

Both the <div> and <p> with class test will have white text, blue background, and padding.

🧾 Example 2: Select `.test` Inside a Specific Element

You can narrow down your selector by combining it with an element or parent selector.

section .test {
  border: 1px solid red;
}

This targets only .test elements inside a <section> tag.

🧾 Example 3: Multiple Classes

If an element has multiple classes, .test still matches:

<div class="card test highlight">Styled because of 'test'</div>

.test {
  font-weight: bold;
}

You can even combine multiple class selectors:

.card.test {
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

🧪 Advanced: Select Only Direct Children

To select .test class elements that are direct children of a parent:

.container > .test {
  margin-bottom: 20px;
}

🧾 Conclusion

To select elements with the class test, simply use .test in your CSS. You can combine it with other selectors to target elements more precisely, giving you full control over your styling.

Pro Tip: Always name your classes semantically to make your CSS more readable and maintainable.