How to use specific selector In CSS
Using a specific selector in CSS overrides styles by targeting elements more precisely. By specifying a more specific selector, such as an ID or nested class, styles can be applied selectively, ensuring that the desired properties take precedence over others.
Syntax:
/* Original style */
.container {
background-color: lightblue;
}
/* Override with specific selector */
#special-container .container {
background-color: lightgreen;
}
Example : Implementation to show to override the CSS properties by using specific selector and then overriding.
<!DOCTYPE html>
<html>
<head>
<title>Without Using !important</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href=
"https://fonts.googleapis.com/css?family=Indie+Flower&display=swap"
rel="stylesheet">
<link href=
"https://fonts.googleapis.com/css?family=Mansalva&display=swap"
rel="stylesheet">
<style>
.body-style {
text-align: center;
font-family: 'Indie Flower', cursive;
/* Apply font to body directly */
}
.my_para {
font-family: 'Mansalva', cursive;
text-align: justify;
background-color: powderblue;
font-size: 130%;
/* Overriding property */
color: red;
}
</style>
</head>
<body class="body-style">
<div class="container">
<h1>w3wiki</h1>
<hr />
<p class="my_para">
Cascading Style Sheets,
fondly referred to as CSS, is a simply designed language
intended to simplify the process of making web pages
presentable. CSS allows you to apply styles to web pages.
More importantly, CSS enables you to do this independent
of the HTML that makes up each web page.
</p>
</div>
</body>
</html>
Output:
How to override the CSS properties of a class using another CSS class ?
To override CSS properties with another class, use the `!important` directive in CSS, emphasizing a style’s importance, overriding others. Applying a new class to an element replaces or modifies styles from its original class, allowing targeted adjustments to appearance, layout, or behavior.
Table of Content
- Using !important property
- Using specific selector