Scribd
Upload
5 views

Advanced Selectors in CSS - GeeksforGeeks

The document provides an overview of advanced CSS selectors, including the Adjacent Sibling Selector and Attribute Selector, with examples of their syntax and usage. It also includes links to related topics and articles about CSS selectors and their applications. The content is aimed at helping developers understand how to effectively select and style HTML elements using CSS.

Uploaded by

shubham
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
5 views

Advanced Selectors in CSS - GeeksforGeeks

The document provides an overview of advanced CSS selectors, including the Adjacent Sibling Selector and Attribute Selector, with examples of their syntax and usage. It also includes links to related topics and articles about CSS selectors and their applications. The content is aimed at helping developers understand how to effectively select and style HTML elements using CSS.

Uploaded by

shubham
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/ 5

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

You might also like