CSS Tutorial CSS Exercises CSS Interview Questions CSS Selectors CSS Properties CSS Funct
Advanced Selectors in CSS
Last Updated : 20 Jul, 2023
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.
Syntax: It selects ul tags that immediately follow the h4 tag.
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:
Attribute Selector: It selects a particular type of input.
Syntax:
input[type="checkbox"] {
background: orange;
}
Example:
html
<!DOCTYPE html>
<html>
<head> Open In App
<title>Attribute</title>
<style type="text/css">
a[href=
"http://www.google.com"] {
background: yellow;
}
</style>
</head>
<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
Define Selectors in jQuery and What are the types of selectors?
Selectors in jQuery: Selectors in jQuery are functions that primarily focus on
selecting particular HTML elementsOpenand
In App
modifying them as per the action…
4 min read
CSS Selectors Complete Reference
CSS selectors are used to select HTML elements based on their element
name, id, class, attribute, and many more. Example: Below the HTML/CSS…
4 min read
Which characters are valid in CSS class names/selectors?
It is very easy to choose a valid class name or selectors in CSS just follow
the rule. A valid name should start with an underscore (_), a hyphen (-) or a…
2 min read
Why are dashes preferred for CSS selectors / HTML attributes ?
CSS is a hyphen-delimited syntax language which means while writing
HTML attributes we can use hyphen(-). Example: font-size, line-height,…
2 min read
Why do browsers match CSS selectors from right to left ?
Cascading Style Sheets fondly referred to as CSS, is a simply designed
language intended to simplify the process of making web pages…
3 min read
How CSS Styles Conflicts Between Selectors ?
CSS conflicts between selectors occur when two or more selectors have
conflicting styles applied to the same element, leading to unexpected…
4 min read
Wildcard Selectors (*, ^ and $) in CSS for classes
Wildcard selectors can be used with attribute selectors. The asterisk (*)
matches any character, the caret (^) matches the start, and the dollar sign…
3 min read
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
10 CSS Selectors Every Developer Should Know
What's the first thing for any website to create a good impression on a user?
... Yes...it's the user interface for any website. Every developer knows how…
9 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
Article Tags : CSS Web Technologies CSS-Advanced
Corporate & Communications
Address:- A-143, 9th Floor, Sovereign
Corporate Tower, Sector- 136, Noida,
Uttar Pradesh (201305) | Registered
Address:- K 061, Tower K, Gulshan
Vivante Apartment, Sector 137,
Noida, Gautam Buddh Nagar, Uttar
Pradesh, 201305
Company Explore
About Us Open In App Job-A-Thon Hiring Challenge
