You are currently viewing How To Select Elements With Class Name ‘Test’ in CSS
  • Post category:CSS

How To Select Elements With Class Name ‘Test’ in CSS

How do You Select Elements With Class Name Test

 In this article I will tell about, how do you select elements with the class name ‘test’.

What is the proper syntax for CSS Selector

CSS provides various types of selectors so that we can be able to get more control or selection of HTML elements and apply styles on them efficiently. And CSS has
Syntax of CSS rule-set/rule

Selector{
declaration list; }

We know the syntax of the CSS rule set that is we write a selector it may be any selector then in flour brackets we put a declaration list. To implement a class selector, in place of a selector, we write a class attribute value preceded by a period or dot symbol (.). To implement an ID selector, in place of a selector, we write an ID attribute value preceded by the hash symbol (#). And To implement the element selector, in place of a selector, we write the tag name only.

Class selector

<tagname class=”classattributevalue”>

.classattributevalue {
declaration list; }

There is an attribute called a class. That class attribute you can use in almost every HTML tag. CSS class selector selects every HTML tag available on the page with a specified class attribute value and applies specified styles to them. You can specify the same class attribute value to more than one tag if required. An HTML element can have a list of class attribute values separated by white space if required.

To select tags by their “class attribute value” and apply styles to them we use a class selector. You can give any “class value” here a user-defined name. As I told to implement class selector, in place of a selector, we write class attribute value proceeded by dot symbol, in flour brackets we write declaration list.

READ ALSO  How to Make Cursive Font HTML | Step by Step Guide

How do You Select Elements With Class Name Test

Access one tag in one class name test

<html>
<head>
<title>Class Selector</title>
</head>
<style type="text/css">
.test{
color: darkviolet;
text-decoration: underline;
text-align: center;
}
</style>
<body>
<h1 class="test">This is Heading tag </h1>
</body>
</html>

Output:

how do you select elements with class name test

If you want to style your HTML element first you need to select your element, select has a type called class. We are going to use it to select the element in it.

  1. Create a class attribute for your HTML tag and give it a value
  2. In CSS, select your HTML element using the .classname syntax.
  3. Then add four brackets and you can write style inside it.

Access multiple tags in one class name test

<html>
<head>
<title>Class Selector</title>
</head>
<style type="text/css">
.test{
color: red;
font-weight: bold;
text-align: center;
}
</style>
<body>
<h1 class="test">This is Heading1 tag </h1>
<h1 class="test">This is Heading2 tag </h1>
<h1 class="test">This is Heading3 tag </h1>
</body>
</html>

Output:

how do you select elements with class name test

If you want to apply the same style to all HTML elements. You can give it the same class value and then write the style in that class name. See the code above for an example

  1. Give the same class name only to the tag that you want to give the same style.
  2. Then use the .classname selector syntax to write your style for all elements.

Conclusion

I hope this article is useful for you. So you can create and style a class name with .test. If in doubt, ask in the comment box

Leave a Reply