Advanced Selectors in CSS - GeeksforGeeks
Advanced Selectors in CSS - GeeksforGeeks
Selectors are used for selecting the HTML elements in the attributes.
Some different types of selectors are given below:
Adjacent Sibling Selector: It selects all the elements that are adjacent
siblings of specified elements. It selects the second element if it
immediately follows the first element.
h4+ul {
border: 4px solid red;
}
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>adjacent</title>
<style type="text/css">
ul+h4 {
border: 4px solid red;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<ul>
Open In App
<li>Language</li>
<li>Concept</li>
<li>Knowledge</li>
</ul>
<h4>Coding</h4>
<h2>Time</h2>
</body>
</html>
Output:
Syntax:
input[type="checkbox"] {
background: orange;
}
Example:
html
<!DOCTYPE html>
<html>
<body>
<a href=
"https://www.geeksforgeeks.org">
geeksforgeeks.com
</a><br>
<a href=
"http://www.google.com"
target="_blank">
google.com
</a><br>
<a href=
"http://www.wikipedia.org"
target="_top">
wikipedia.org
</a>
</body>
</html>
Output:
Read More
Similar Reads
Open In App
Difference Between Descendant and Child Selectors in CSS
The Descendant selector and child selector in CSS are both used to target
specific elements within the document structure, but they differ in their lev…
1 min read
CSS Selectors
CSS selectors target the HTML elements on your pages, allowing you to add
styles based on their ID, class, type, attribute, and more. This guide will hel…
5 min read
Company Explore
About Us Open In App Job-A-Thon Hiring Challenge