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 within an HTML element can be employed to define a class by utilizing the subsequent syntax:
<element class="classname">
code
</element>
The CSS syntax below can be employed to select the previously specified class:
.classname {
attribute: value;
}
Establishing a CSS Class
Utilizing the class attribute within an HTML element tag enables the creation of a CSS class in HTML. Any alphanumeric string with uppercase or lowercase letters, digits, hyphens, and underscores is permissible as a class name. It is important to note that a CSS class name cannot include spaces. Besides functioning within the class selector in CSS, a classname can also be employed by JavaScript to manipulate HTML elements. The subsequent illustration showcases the process of assigning a class name to an HTML element:
<div class="division element">
<a class="anchor tag"></a>
</div>
An <div> element identified by the CSS class "division" and an <a> tag styled with the class name "anchor" constitute the aforementioned instance.
Can CSS Classes Contain an Element?
In HTML, a solitary element can encompass multiple class names, with each one being set apart by a space. This approach is beneficial as incorporating multiple class names can enhance the specificity of items. For example:
<div class="another division">
<a class="another anchor"></a>
</div>
An <div> element containing the class names "another" and "division" alongside a <a> tag with the class names "another" and "anchor" constitute the example provided.
Using the CSS Class Selector
In CSS, a class selector can be combined with a class name directly, as illustrated in the following example:
<div class="Main">
<div class="child">One</div>
<div class="child">Two</div>
<p class="child">Three</p>
<p>Four</p>
</div>
Two division elements and two paragraph elements are outlined in the HTML provided. The class attribute of one of the division elements is defined as "Main". Inside the main division, both division elements and one of the paragraph elements are assigned the class "child".
By employing the CSS code below, we can modify the background and border hues of the elements. Additionally, margins and padding have been incorporated for improved visibility.
<!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 observed, every selected item has been formatted using the methods outlined earlier. The .child selector targeted both the div and p elements, and the identical styles were implemented on both.
Pseudo-Classes
In CSS, pseudo-classes play a vital role in defining specific states for HTML elements. These pseudo-classes enhance the functionality by targeting different states of HTML components. By employing suitable pseudo-classes, you can define states like visited links, active links, hover effects, first child, last child, nth-child, and more. The syntax below illustrates the combination of pseudo-classes with 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 the cursor hovers over an element, this pseudo-class applies a specific effect to it. The example below demonstrates the transition of text color from black to a combination of pink and yellow when the cursor is within the box area.
The hover CSS pseudo-class is demonstrated in this instance.
<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 utilized to recognize an element that activates upon user clicking. The provided example demonstrates a brief color change in text upon clicking.
Example: This instance showcases 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 pseudo-class is utilized to select the element that the user is currently interacting with. When a user clicks on any of the input items within forms, the script is triggered. In the given example, the background color of the focused input field undergoes a change.
The CSS focus pseudo-class is demonstrated in this instance.
<!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 visited pseudo-class is applied to select URLs that have been previously accessed by the user. Clicking on a link in the provided example alters its color.
This instance in CSS showcases 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 is chosen based on its language attributes using an :lang Selector. This method relies on the language code to determine the selection.
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 represents the initial element within a group of associated elements. To apply styles specifically to this first-child element within its parent container, utilize 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