CSS Selectors
CSS
selectors are patterns used to select and style elements on a web page. They
allow you to target HTML elements based on their tag, class, ID, attributes, or
other criteria. Here's an overview of some common CSS selectors:
1. Basic Selectors
Type
Selector: Selects
all elements of a given type (tag).
p {
color: blue;
}
Class
Selector: Selects
all elements with a specific class.
.my-class {
font-size: 18px;
}
ID
Selector: Selects an
element with a specific ID (note: IDs should be unique per page).
#my-id {
background-color: yellow;
}
-----------------------------------------------------------------------------------------------------------------------
Program :
1-1
Sava: simpleselector.html
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Basic Selectors
Example</title>
<style>
/* Type
Selector */
p {
font-size: 16px;
color: black;
}
/* Class
Selector */
.intro {
font-weight: bold;
color: blue;
}
/* ID
Selector */
#main-title
{
font-size: 24px;
color: green;
}
/* Type
Selector applied to all <div> elements */
div {
background-color: lightgrey;
padding: 10px;
}
</style>
</head>
<body>
<h1 id="main-title">Welcome
to My Website</h1>
<p class="intro">This is
the introduction paragraph.</p>
<p>This is a regular paragraph
without a class.</p>
<div class="container">
<p>This paragraph is inside a
div.</p>
</div>
</body>
</html>
Output 01:
-------------------------------------------------------------------------------------------------------------------------
2. Combinator Selectors
Descendant
Selector: Selects
all elements inside a specific element.
div p {
color: green;
}
Child
Selector (`>`): Selects
only direct children of a specific element.
ul > li {
margin: 10px;
}
Adjacent
Sibling Selector (`+`): Selects
the element immediately after a specified element.
h1 + p {
font-style: italic;
}
General
Sibling Selector (`~`): Selects
all siblings after a specified element.
h1 ~ p {
color: red;
}
Program : 2-1
Sava : CombinatorSelectors.html
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Combinator Selectors
Example</title>
<style type="text/css">
/* Descendant Selector - selects all
<p> inside .container */
.container
p {
color: blue;
}
/* Child
Selector - selects only direct child <li> elements of <ul> */
ul > li
{
font-weight: bold;
}
/* Adjacent
Sibling Selector - selects the <p> immediately following <h2> */
h2 + p {
color: green;
}
/* General
Sibling Selector - selects all <p> siblings after <h2> */
h2 ~ p {
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="container">
<h1>Main Heading</h1>
<p>This is a paragraph inside a
container.</p>
<p class="note">This is
another paragraph inside a container.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<h2>Sub Heading</h2>
<p>This paragraph follows a sub
heading.</p>
<p>This paragraph is a sibling of the
previous one.</p>
<div>
<p>Another paragraph inside a
div.</p>
<span>This is a span inside the
div.</span>
</div>
</body>
</html>
Ouput:2-1
--------------------------------------------------------------------------------------------------------------------------
3. Attribute Selectors
[attribute]: Selects elements with a specific attribute.
[type="text"] {
border: 1px solid black;
}
[attribute^="value"]: Selects elements whose attribute value starts with a
specific string.
[class^="btn"] {
background-color: blue;
}
[attribute$="value"]: Selects elements whose attribute value ends with a
specific string.
[href$=".pdf"] {
color: red;
}
[attribute*="value"]: Selects elements whose attribute value contains a
specific string.
[title*="example"] {
font-weight: bold;
}
Program :
3-1
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Attribute Selectors
Example</title>
<style>
/* [attribute] - Selects elements with
the specified attribute */
input[placeholder]
{
border: 2px solid blue;
padding: 5px;
}
/*
[attribute="value"] - Selects elements with the exact attribute value
*/
a[target="_blank"]
{
color: red;
}
/*
[attribute^="value"] - Selects elements whose attribute value starts
with the specified string */
img[src^="image"]
{
border: 5px solid green;
}
/*
[attribute$="value"] - Selects elements whose attribute value ends
with the specified string */
a[href$=".com"]
{
text-decoration: underline;
}
/*
[attribute*="value"] - Selects elements whose attribute value
contains the specified string */
input[type*="password"]
{
background-color: lightgray;
}
</style>
</head>
<body>
<a
href="https://www.example.com" target="_blank">Visit
Example</a><br>
<a
href="https://www.sample.com" target="_self">Visit
Sample</a><br>
<input type="text"
placeholder="Enter your name"><br>
<input type="password"
placeholder="Enter your password"><br>
<input type="submit"
value="Submit"><br>
<img src="image.jpg"
alt="A beautiful image" width="300"><br>
<img src="photo.jpg"
alt="A scenic photo" width="500"><br>
</body>
</html>
Output:3-1
--------------------------------------------------------------------------------------------------------------------------
4. Pseudo-Class Selectors
hover: Selects elements when the user hovers over them.
a:hover {
color: orange;
}
nth-child(): Selects elements based on their position within a
parent.
tr:nth-child(odd) {
background-color: lightgrey;
}
first-child: Selects the first child of a parent element.
p:first-child {
font-size: 20px;
}
last-child: Selects the last child of a parent element.
p:last-child {
margin-bottom: 0;
}
Program :
4-1
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Pseudo-Class Selectors
Example</title>
<style type="text/css">
/* :hover - Change link color when
hovered */
a:hover {
color: red;
text-decoration: underline;
}
/* :focus -
Highlight input fields when focused */
input:focus
{
border: 2px solid blue;
background-color: lightyellow;
}
/*
:nth-child - Style specific list items */
ul
li:nth-child(odd) {
background-color: lightgrey;
}
ul
li:nth-child(even) {
background-color: white;
}
/*
:first-child - Style the first element */
p:first-child
{
font-weight: bold;
color: green;
}
/*
:last-child - Style the last element */
p:last-child
{
font-style: italic;
color: orange;
}
/*
:required - Style required form fields */
input:required
{
border: 2px solid red;
}
</style>
</head>
<body>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
<a href="#">Hover over this
link</a>
<form>
<input type="text"
placeholder="Name">
<input type="email"
placeholder="Email">
<input type="submit"
value="Submit">
</form>
<p
class="first-paragraph">This is the first paragraph.</p>
<p>This is the second
paragraph.</p>
</body>
</html>
Output: 4-1
--------------------------------------------------------------------------------------------------------------------------
5. Pseudo-Element Selectors
::before: Inserts content before the selected element.
h1::before {
content: "Note: ";
}
::after: Inserts content after the selected element.
h1::after {
content: "!";
}
::first-letter: Selects the first letter of an element.
p::first-letter {
font-size: 30px;
}
Program:
5-1
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Pseudo-Element Selectors
Example</title>
<style type="text/css">
/* ::before - Inserts content before an
element */
blockquote::before
{
content: "“"; /* Opening
quotation mark */
font-size: 30px;
color: grey;
margin-right: 5px;
}
/* ::after
- Inserts content after an element */
blockquote::after
{
content: "”"; /* Closing
quotation mark */
font-size: 30px;
color: grey;
margin-left: 5px;
}
/*
::first-letter - Styles the first letter of the paragraph */
p::first-letter
{
font-size: 40px;
color: red;
font-weight: bold;
}
/*
::first-line - Styles the first line of the paragraph */
p::first-line
{
font-weight: bold;
color: darkblue;
}
/*
::selection - Styles the text when selected (highlighted by the user) */
p::selection
{
background-color: yellow;
color: black;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a sample paragraph to
demonstrate pseudo-elements. It contains some text that we can manipulate using
CSS.</p>
<blockquote>This is a quote that will
be styled using the ::before and ::after pseudo-elements.</blockquote>
<p class="intro">This is
another paragraph with an introductory first letter.</p>
</body>
</html>
Output: 5-1
--------------------------------------------------------------------------------------------------------------------------
6. Group Selector
,:
Selects multiple
elements and applies the same style to them.
h1, h2, h3 {
font-family: Arial;
}
Program:
6-1
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Group Selector
Example</title>
<style type="text/css">
/* Group Selector - Apply the same
styles to <h1>, <h2>, and <p> elements */
h1, h2, p {
font-family: Arial, sans-serif;
color: darkblue;
margin-bottom: 15px;
}
/* Another
Group Selector for different elements */
h1, h2 {
border-bottom: 2px solid lightgray;
padding-bottom: 5px;
}
/* Group
Selector for all <p> inside div and footer */
div p,
footer p {
font-size: 14px;
color: gray;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<h2>Sub Heading 1</h2>
<h2>Sub Heading 2</h2>
<p>This is a paragraph under a
heading.</p>
<div class="container">
<p>This is a paragraph inside a
container.</p>
</div>
<footer>
<p>This is a footer
paragraph.</p>
</footer>
</body>
</html>
Output: 6-1
Comments
Post a Comment