Scribd
Upload
10 views7 pages

Sibling Selector

The document explains CSS selectors, including adjacent sibling selectors, general sibling selectors, and pseudo-classes, providing examples for each. It details how to style elements based on their relationship to other elements and their states, such as hover and focus. Additionally, it covers pseudo-elements ::before and ::after, which allow for adding content before or after elements without altering the HTML structure.

Uploaded by

chiragal864
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views7 pages

Sibling Selector

The document explains CSS selectors, including adjacent sibling selectors, general sibling selectors, and pseudo-classes, providing examples for each. It details how to style elements based on their relationship to other elements and their states, such as hover and focus. Additionally, it covers pseudo-elements ::before and ::after, which allow for adding content before or after elements without altering the HTML structure.

Uploaded by

chiragal864
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML Code:

html
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adjacent Sibling Selector Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Welcome to My Website</h1>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>

</body>
</html>

CSS Code:

css
Copy
/* Style only the <p> that immediately follows <h1> */
h1 + p {
color: red;
font-weight: bold;
}

Explanation:

 The selector h1 + p will only apply styles to the first <p> element that immediately
follows the <h1>.
 In this case, the second <p> ("This is the first paragraph.") will be styled with red color
and bold font weight, because it is directly after the <h1>.
 The third <p> ("This is the third paragraph.") will not be affected because it is not
immediately after the <h1>.
The general sibling selector (~)

in CSS selects all elements that are siblings of a specified element. It targets all elements that
come after the specified element in the same parent, regardless of their type.

Example:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General Sibling Selector Example</title>
<style>
/* Apply a style to all <p> elements that follow an <h2> element */
h2 ~ p {
color: green;
font-weight: bold;
}
</style>
</head>
<body>

<h2>This is a Heading</h2>
<p>This paragraph will turn green and bold because it is a sibling of the
<code>h2</code>.</p>
<p>This paragraph will also turn green and bold.</p>
<h2>Another Heading</h2>
<p>This paragraph will not be affected because it comes after the second
<code>h2</code>.</p>

</body>
</html>

Output:

 The paragraphs that come after the first <h2> (in this case, the first two <p> elements)
will have the text color changed to green and the font will be bold.
 The last <p> element after the second <h2> will not be styled because it is not following
the first <h2>.

This demonstrates how the general sibling selector (~) targets all siblings that appear after the
specified element, in this case, <h2>.
In CSS, pseudo-classes are used to define the special state of an element, such as when it's being
hovered over or focused. These pseudo-classes are prefixed with a colon (:) and can be used to
target elements in various states.

Common Pseudo-Classes in CSS

1. :hover - Targets an element when the mouse pointer is over it.


2. :focus - Targets an element when it is focused (e.g., an input field).
3. :active - Targets an element when it is being clicked.
4. :nth-child() - Targets elements based on their position in a group of siblings.
5. :first-child - Targets the first child element of a parent.
6. :last-child - Targets the last child element of a parent.
7. :not() - Excludes certain elements from a selection.

Example 1: :hover, :focus, and :active


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-Classes Example</title>
<style>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: lightblue;
border: 2px solid #007BFF;
}

/* Change color on hover */


button:hover {
background-color: lightcoral;
}

/* Change color when focused */


button:focus {
outline: 3px solid orange;
}

/* Change color when clicked (active state) */


button:active {
background-color: darkred;
color: white;
}
</style>
</head>
<body>
<button>Click Me!</button>
</body>
</html>
Explanation:

 :hover: When you hover over the button, the background color changes to light coral.
 :focus: When the button is focused (such as by clicking on it or using the keyboard), the
border outline changes to orange.
 :active: When you press the button, it turns dark red and the text color changes to
white.

Example 2: :nth-child(), :first-child, and :last-child


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-Classes Example</title>
<style>
ul li {
font-size: 18px;
padding: 5px;
color: darkgreen;
}

/* Select every second list item */


ul li:nth-child(2n) {
color: orange;
}

/* Select the first list item */


ul li:first-child {
font-weight: bold;
color: blue;
}

/* Select the last list item */


ul li:last-child {
text-decoration: underline;
}

</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
</html>

Explanation:
 :nth-child(2n): Selects every second <li> in the list, changing its color to orange.
 :first-child: Selects the first <li>, making its text bold and changing its color to blue.
 :last-child: Selects the last <li>, underlining the text.

Example 3: :not()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-Class Example</title>
<style>
p {
color: gray;
}

/* Exclude the first paragraph */


p:not(:first-child) {
color: black;
}
</style>
</head>
<body>
<p>This is the first paragraph (gray).</p>
<p>This is the second paragraph (black).</p>
<p>This is the third paragraph (black).</p>
</body>
</html>

Explanation:

 :not(:first-child): This targets all paragraphs except the first one, turning their color
to black, while the first paragraph remains gray.

Summary:

Pseudo-classes allow you to select elements based on their dynamic state or position, providing
more control and interactivity in styling.
Pseudo-elements in CSS, specifically ::before and ::after, are used to add content before or
after an element's original content. These pseudo-elements can be used to enhance design, such
as adding decorations or icons, without modifying the HTML structure.

Syntax:
selector::before {
content: "Text or content before the element";
/* other styles */
}

selector::after {
content: "Text or content after the element";
/* other styles */
}

Example:

Let's take an example of a paragraph where we use ::before to add content before the text and
::after to add content after the text.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-elements Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="example">This is a paragraph.</p>
</body>
</html>

CSS:

.example::before {
content: "Before text - ";
color: red;
font-weight: bold;
}

.example::after {
content: " - After text";
color: blue;
font-style: italic;
}

Output:
The paragraph will appear like this:

Before text - This is a paragraph. - After text

 The text "Before text - " will be added before the paragraph content, in red and bold.
 The text " - After text" will be added after the paragraph content, in blue and italic.

Key Points:

 ::before inserts content before the element’s original content.


 ::after inserts content after the element’s original content.
 The content property is mandatory for both ::before and ::after.
 You can style these pseudo-elements with additional CSS properties (color, font styles,
margins, padding, etc.).

You might also like