In this CSS tutorial, I will provide information about some advanced CSS selectors. In this tutorial, you will get to know about "combinator selectors".
CSS "combinator selectors" allow you to select elements based on their relationship with other elements. There are four types of "combinator selectors".
- Descendant Selector
- Child Selector ( > )
- Adjacent Sibling Selector ( + )
- General Sibling Selector ( ~ ) Selectors
Descendant Selector:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS CODING : CSS Selector</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
.container .heading {
border: 1px solid black;
padding: 10px;
margin: 10px 0;
background: chocolate;
color: #fff;
}
.container p .highlight {
padding: 10px;
margin: 10px 0;
color: maroon;
text-transform: uppercase;
}
.classExample h2{
background-color: lightgray;
padding: 10px;
color: royalblue;
letter-spacing: 4px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="heading">Using Div and Span</h2>
<p>This is a paragraph inside a Here is a <span class="highlight">highlighted text</span> using a tag.</p>
</div>
<div class="classExample">
<h2>Using a Class Inside Another Div</h2>
<p>This is another where a class is applied for styling. It includes a <strong>bold text</strong> and <em>italic text</em>.</p>
<a href="#">This is a link</a>
</div>
</body>
</html>
CSS Explanation:
.highlight:
.container .heading:
.container p .highlight:
.classExample h2:
Summary:
- The HTML uses div and span tags for structure and inline text styling.
- The CSS applies styles to headings, paragraphs, and spans to give them specific colors, padding, and margins.
- Descendant selectors are used, such as .container p .highlight, to apply styles only when certain elements are within others.
Child Selector ( > ):
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS CODING : CSS Selector</title>
<style>
div > p {
color: blue;
font-weight: bold;
}
#nested p {
color: red;
}
</style>
</head>
<body>
<div>
<p>Yeh paragraph direct child hai.</p>
<p>Yeh bhi direct child hai.</p>
<div id="nested">
<p>Yeh nested paragraph hai.</p>
</div>
</div>
</body>
</html>
CSS Explanation:
.classExample h2:
div > p:
- This CSS rule uses a Child Selector (>), which targets only the direct child p tags of each div.
- Setting their text color to blue makes the font black and creates those p elements.
- In this code, the first two p tags in the first div are direct children, so they will be formatted with blue text and bold.
#nested p
- This rule uses an ID Selector (#nested), which targets any p tag in a div with id="nested".
- Sets the text color for each p in the div with id="nested" to red.
- The p in the nested div will have red text because it is selected by this rule.
Adjacent Sibling Selector ( + ):
The adjacent sibling selector (+) is a CSS selector that selects the element after an element. It only works on elements that are directly after the first element.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS CODING : CSS Selector</title>
<style>
h1+p {
color: darkgreen;
font-size: 18px;
font-weight: bold;
margin-top: 10px;
}
h2+div {
background-color: lightblue;
padding: 15px;
border: 1px solid #ccc;
}
h1,
h2 {
color: rgb(10, 230, 230);
}
p {
font-size: 16px;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Welcome to Rays Coding</h1>
<p>This paragraph is right after the h1 and will be styled using the adjacent sibling selector.</p>
<p>This is another paragraph, but it won't be affected as it's not adjacent to h1.</p>
<h2>Why Learn CSS Selectors?</h2>
<div>
This div comes right after the h2 and will be styled using the adjacent sibling selector.
</div>
<p>This paragraph is after the div and won't be affected by the adjacent sibling selector.</p>
</body>
</html>
CSS Explanation:
- h1 + p: Targets only the first p that comes right after the h1. This paragraph is styled with a dark green color, bold font, and margin.
- h2 + div: Targets the div that comes immediately after the h2. It is given a light blue background, padding, and a border.
- The second paragraph and div are not selected since they are not adjacent siblings to h1 or h2.
General Sibling Selector ( ~ ):
Example:
<!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>
h2 ~ p {
color: green;
font-size: 18px;
margin-bottom: 10px;
}
h2 {
color: darkslateblue;
font-size: 24px;
margin-bottom: 10px;
}
p {
font-size: 16px;
color: gray;
}
</style>
</head>
<body>
<h2>Introduction to General Sibling Selector</h2>
<p>This is the first paragraph and it will be styled because it comes after the h2.</p>
<p>This is the second paragraph and it will also be styled because it comes after the h2.</p>
<div>
<p>This paragraph is inside a div, so it will not be affected by the general sibling selector.</p>
</div>
<p>This is another paragraph, and it will also be styled since it's a sibling of h2.</p>
</body>
</html>
CSS Explanation:
- List items (li): Fixed the font-weight typo (bo to bold).
- Paragraph styling (h2 ~ p): Applied some spacing (margin-bottom: 10px) for better readability.