Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Understanding CSS Selector and Declarations
CSS selectors are used to select HTML elements by matching each element of a given pattern. We define the styles by declaring properties and their values inside the selector block.
Syntax
selector {
property: value;
}
For example −
div {
height: 200px;
}
Above, the selector is div, the property is height and the value is 200px.
Types of Selectors
CSS has various types of selectors to target different elements and states ?
Basic selectors − ID, class, element, universal
Combinator selectors − Adjacent sibling, general sibling
Pseudo-classes − :hover, :focus, :first-child
Pseudo-elements − ::before, ::after, ::first-line
Attribute selectors − Select by attribute or value
Basic Selectors
The basic selectors include selecting elements based on id, class, element type, and universal selection ?
#id − ID Selector
.class − Class Selector
element − Element Selector
element, element − Grouping Selectors
* − Universal Selector
Class Selector
The class selector uses a period (.) followed by the class name to select elements with a specific class attribute ?
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
width: 100px;
height: 100px;
background: rgb(0, 255, 13);
border: 3px solid rgb(27, 0, 78);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Create a Circle</h1>
<div class="circle"></div>
</body>
</html>
A green circle with dark blue border appears below the heading.
ID Selector
The ID selector uses a hash (#) character followed by the ID name to select an element with a specific ID attribute ?
<!DOCTYPE html>
<html>
<head>
<style>
#one {
filter: invert(85%);
}
</style>
</head>
<body>
<img id="one" src="/hadoop/images/hadoop-mini-logo.jpg" alt="Hadoop Logo">
<img src="/plsql/images/plsql-mini-logo.jpg" alt="PLSQL Logo">
</body>
</html>
Two images are displayed, with the first image (Hadoop logo) inverted while the second remains normal.
Grouping Selectors
Multiple selectors can be styled together using commas to separate each selector ?
<!DOCTYPE html>
<html>
<head>
<style>
div, p {
margin: 10px;
padding: 20px;
height: 150px;
width: 250px;
border: 2px solid #333;
background-color: lightblue;
}
p {
background-color: lightcoral;
color: white;
}
</style>
</head>
<body>
<h2>Grouping Selectors Demo</h2>
<div>This is a div element</div>
<p>This is a paragraph element</p>
</body>
</html>
A light blue div box and a light coral paragraph box appear, both with similar dimensions and borders.
Universal Selector
The universal selector (*) applies styles to all elements in the document ?
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 5px;
margin: 5px;
box-sizing: border-box;
}
form {
width: 70%;
margin: 20px auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
padding: 10px 20px;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Universal Selector Demo</legend>
<h1>Learn Programming</h1>
<input type="button" value="HTML">
<input type="button" value="CSS">
</fieldset>
</form>
</body>
</html>
A centered form with a fieldset containing a heading and two rounded buttons appears with consistent spacing applied to all elements.
Combinator Selectors
Combinator selectors define relationships between elements ?
Adjacent Sibling Selector (+)
The adjacent sibling selector (+) selects an element that immediately follows another specified element ?
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
font-size: 1.2em;
font-weight: bold;
background: powderblue;
padding: 10px;
}
</style>
</head>
<body>
<div>This is a div</div>
<p>This paragraph is immediately after div (selected)</p>
<p>This paragraph is not selected</p>
</body>
</html>
A div followed by two paragraphs, where only the first paragraph (immediately after div) has a powder blue background and bold text.
General Sibling Selector (~)
The general sibling selector (~) selects all sibling elements that follow a specified element ?
<!DOCTYPE html>
<html>
<head>
<style>
h2 ~ p {
background: lavender;
padding: 10px;
border-left: 4px solid purple;
}
</style>
</head>
<body>
<p>This paragraph is before h2 (not selected)</p>
<h2>Heading</h2>
<p>This paragraph follows h2 (selected)</p>
<div>Some content</div>
<p>This paragraph also follows h2 (selected)</p>
</body>
</html>
Three paragraphs and a heading, where the two paragraphs following the heading have lavender backgrounds with purple left borders.
Pseudo-class Selectors
Pseudo-classes select elements based on their state or position ?
:first-of-type Pseudo-class
The :first-of-type selector targets the first element of its type among siblings ?
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type {
color: red;
font-weight: bold;
font-size: 1.2em;
}
</style>
</head>
<body>
<h1>Demo Page</h1>
<p>This is the first paragraph (selected)</p>
<p>This is the second paragraph</p>
<p>This is the third paragraph</p>
</body>
</html>
Three paragraphs where only the first paragraph appears in red, bold text with larger font size.
Pseudo-element Selectors
Pseudo-elements style specific parts of an element ?
::first-line Pseudo-element
The ::first-line pseudo-element styles the first line of text content ?
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
background-color: lightgreen;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h2>First Line Demo</h2>
<p>This is the first line of the paragraph which will be styled differently. The rest of the paragraph continues normally without the special styling applied to only the first line.</p>
</body>
</html>
A paragraph where only the first line has a light green background with white, bold text, while the remaining lines appear normally.
Attribute Selectors
Attribute selectors target elements based on their attributes and values ?
[attribute] Selector
Selects elements that have a specific attribute, regardless of its value ?
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
padding: 5px;
text-decoration: none;
}
</style>
</head>
<body>
<h2>Attribute Selector Demo</h2>
<a href="/html/index.htm" target="_blank">HTML Tutorial</a><br><br>
<a href="/css/index.htm">CSS Tutorial</a>
</body>
</html>
Two links where only the first link (with target attribute) has a yellow background and padding.
Conclusion
CSS selectors provide powerful ways to target HTML elements for styling. Understanding basic selectors, combinators, pseudo-classes, pseudo-elements, and attribute selectors allows you to create precise and flexible stylesheets for your web pages.
376 Views
