CSS Class Selector

HTML elements are chosen or chosen using CSS selectors so that CSS styles may be applied to them. The class names of HTML elements are supplied as attributes within an HTML tag, and a class selector in CSS is used to choose HTML components based on these class names. Any string value followed by a dot (.) like .class may be used as a classname in HTML and is created by utilizing the class attribute within an HTML element.

Using a class selector would pick all items with that specific class, which is vital to remember as several components may have the same class property.

What Functions CSS Class Selector (".class") Performs?

In CSS, class attributes are used to style items using a class selector.
In CSS, a class selector picks out HTML elements that belong to the specified class and applies the appropriate styles to them.
Class selectors add particular styles to the element based on the class name supplied for an element.
In CSS, a class selector may simultaneously pick several items with the same class name and apply the same style.

Syntax

The class attribute of an HTML element may be used to declare a class using the following syntax:

<element class="classname">
    code
</element>

The following syntax in CSS can be used to choose the previously mentioned class:

.classname {
    attribute: value;
}

Establishing a CSS Class

Using the class attribute within an HTML element tag may construct a CSS class in HTML. Any string value with capital or lowercase characters, numbers, hyphens, and underscores can be used as a class name. A space cannot be contained within a CSS class name. In addition to being used within the class selector, a classname may also be utilized by JS to modify HTML elements. The example that follows demonstrates how to add a class name to any HTML element:

<div class="division element">
    <a class="anchor tag"></a>
</div>

An <div> element with the class name "division" and <a> tag with the class name "anchor" make up the previous example.

Can CSS Classes Contain an Element?

In HTML, a single element may contain many class names, each separated by a space. This is advantageous since using several class names may give items more specificity. For instance:

<div class="another division">
    <a class="another anchor"></a>
</div>

An <div> element with the class names "another" and "division" and a <a> tag with the class names "another" and "anchor" make up the sample above.

Using the CSS Class Selector

In CSS, a class selector can be used together with a class name directly, as in the example below:

<div class="Main">
       <div class="child">One</div>
       <div class="child">Two</div>
       <p class="child">Three</p>
       <p>Four</p>
</div>

Two div elements and two p elements are described in the HTML above. A div element's class is set to "Main". Within the main, the two div elements and one of the p elements all have the class set to the child.

By utilizing the following CSS, we may alter the background and border colors of the components. For visibility, we have also added margins and padding.

<!DOCTYPE html>
<html>
<head>
<style>
.Main {
color: red;
}
.child {
background-color: lightblue;
color: red;
}
</style>
</head>

<body style="text-align:left">
<h1 class="Main">
Welcome to the page
</h1>
<h2>Example of .class Selector</h2>
<div class="child">
<p>Let's start the tutorial</p>
</div>
</body>
</html>

Output

As you can see, each chosen item has been styled using the techniques mentioned above. The .child selector chose both the div and the p elements, and the same styles were applied to them.

Pseudo-Classes

In CSS, pseudo-classes are used to specify certain states for HTML components. For various states of HTML components, pseudo-classes offer additional functionality. Utilizing the appropriate pseudo classes, it is possible to provide states such as visited links, active links, mouse over items, first child, final child, nth-child, etc. The following syntax can be used to combine pseudo-classes and CSS selectors:

selector: pseudo-class {  
property: value;  
}  

Although there are many CSS pseudo-classes, we'll talk about some of the more popular ones in this article. The following list is the most popular CSS classes:

:active
:hover
:link
:visited
:lang
:focus
:first-child

:hover Pseudo-class

When our mouse cursor hovers over an element, this pseudo-class adds a particular effect to it. The illustration below shows how the text color changes from black to pink and yellow as our mouse reaches the box region.

Example: The hover CSS pseudo-class is displayed in this example.

<html>
   <head>
      <style>
         body{
text-align: left;
}
h1:hover{
color: pink;
}
h2:hover{
color: yellow;
}
      </style>
   </head>

   <body>
      <h1>Welcome</h1>
<h2>This program is an example of the :hover pseudo class</h2>
   </body>
</html>

Output

:active Pseudo-class

This pseudo-class is used to identify an element that becomes active when a user clicks on it. The following sample shows how the text color briefly changes when you click on it.

Example: This example displays the CSS active pseudo-class.

<html>
   <head>
      <style>
         body:active {
            background: lightblue;   
         }
      </style>
   </head>
   <body>
      <div>click anywhere in this window</div>
   </body>
</html>

Output

:focus Pseudo-class

The element that the user is now focusing on is chosen using this pseudo-class. The script is invoked when a user clicks on one of the user input items used in forms. The background color of the input field that is now in focus changes in the following example.

Example: The CSS focus pseudo-class is displayed in this example.

<!DOCTYPE HTML>
<html>
  <style>
  form{
  text-align: left;
  }
  input:focus{
         border:5px solid blue;
         box-shadow:10px black;
         color: red;
         width:200px;
}
   </style>
 <body>
  <form>
    <h1>UserName: <input type="text" value="Enter your username"></h1>
    <h1>email <input type="email" value="Enter your email"></h1>
    <h1>password <input type="password" value="Enter your password"></h1>
   </form>
</body>
</html>

Output

:visited pseudo-class

The URLs already viewed by the user are chosen using the visited pseudo-class. When a link is clicked in the sample below, its color changes.

Example: This example in CSS displays the visited pseudo-class.

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
body{
text-align: left;
}
    a:visited{ 
        color: red; 
    } 

    </style> 
</head> 
  
<body> 
    <h1>Welcome</h1> 
    <h2>This is an example of :visited pseudo-class</h2> 
<h3>Click the following link to see the color change</h3>
    <a href="#">Click the link</a>
</body> 
</html>

Output

The element based on language characteristics is targeted for a particular value using an :lang Selector. This selection uses the language code to function.

Syntax

:lang(language-code) {
  //property
}

Language Codes:

en: used for English.
hi: used for Hindi.
fr: used for French.
de: used for German
it: is used for Italian
ca: used for Canadian

Example

<!DOCTYPE html>
<html>

<head>
<style>
h3:lang(hi) {
background: lightblue;
}
</style>
</head>

<body lang="hi">

<h3>"hi" is language-code for Hindi.</h3>
<h3>"fr" is language-code for French.<h3>
<h3>"ca" is language-code for Canada.<h3>
</body>
</html>

Output

:first-child pseudo-class

In CSS, the first-child pseudo-class is the first element in a set of related components. To style the first-child element of its parent, use the :first-child selector.

Syntax

:first-child {
     //property
}

Example

<!DOCTYPE HTML>
<html>
   <head>
      <style>
          h1:first-child {
color:blue;
         }
      </style>
   </head>

   <body>
   
      <div>
         <h1>It is the first child. So, the text color is in blue.</h1>
         <h2>It is the Second child and is unaffected.</h1>
      </div>
   </body>
</html>

Output