CSS Advanced Selectors
Advanced selectors allow you to target elements with more precision and efficiency. These selectors are very useful for complex styling without needing to add extra classes or IDs in the HTML.
1. Descendant Selector (Ancestor Descendant)
A descendant selector uses a space to target elements inside other elements, at any level of depth.
/* Target all <p> inside <div> (at any level) */
div p {
color: #555;
line-height: 1.8;
margin-bottom: 10px;
}
/* Target all <a> inside <nav> */
nav a {
color: white;
text-decoration: none;
padding: 10px 15px;
display: inline-block;
transition: background-color 0.3s ease;
}
nav a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* Target all <li> inside <ul> inside <footer> */
footer ul li {
list-style: none;
padding: 5px 0;
}
footer ul li a {
color: #999;
font-size: 0.9rem;
}
<div>
<p>Paragraph inside div (Will be selected)</p>
<section>
<p>Paragraph inside section inside div (Still selected)</p>
<article>
<p>Paragraph inside article inside section inside div (Still selected)</p>
</article>
</section>
</div>
<p>Paragraph outside div (Not selected)</p>
2. Child Selector (Direct Child)
The child selector uses the greater-than sign (>) to target only direct children, not all descendants.
/* Only <p> that is a direct child of <div> */
div > p {
color: #333;
font-weight: 600;
border-left: 3px solid #3498db;
padding-left: 15px;
}
/* Only <li> that is a direct child of <ul> */
ul > li {
list-style: none;
padding: 12px 15px;
border-bottom: 1px solid #eee;
transition: background-color 0.3s ease;
}
ul > li:hover {
background-color: #f8f9fa;
}
/* Only <a> that is a direct child of <nav> */
nav > a {
display: inline-block;
padding: 15px 25px;
background-color: #3498db;
color: white;
text-decoration: none;
font-weight: 600;
}
<div>
<p>Direct child of div (Selected)</p>
<section>
<p>Not a direct child of div (Not selected)</p>
</section>
</div>
Descendant vs Child
/* Descendant: all p inside div are selected */
div p { color: red; }
/* Child: only direct child p of div is selected */
div > p { color: blue; }
<div>
<p>Direct child (Red and Blue)</p>
<section>
<p>Child of section (Only Red)</p>
</section>
</div>
3. Adjacent Sibling Selector
The adjacent sibling selector uses the plus sign (+) to target the element that comes immediately after another element (a direct sibling).
/* Paragraph immediately after h1 */
h1 + p {
font-size: 1.2rem;
color: #666;
font-style: italic;
margin-bottom: 25px;
}
/* Paragraph immediately after h2 */
h2 + p {
color: #555;
line-height: 1.9;
}
/* Input immediately after label */
label + input {
margin-top: 8px;
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}
/* Div immediately after div */
.highlight + .normal {
margin-top: 20px;
padding-top: 20px;
border-top: 2px solid #eee;
}
<h1>Main Title</h1>
<p>Intro paragraph (Italic, larger)</p>
<p>Normal paragraph (Not affected by adjacent sibling)</p>
<h2>Subtitle</h2>
<p>Paragraph after h2 (Color #555)</p>
<p>Second paragraph after h2 (Not affected)</p>
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email">
4. General Sibling Selector
The general sibling selector uses the tilde (~) to target all sibling elements that come after a specific element.
/* All <p> that come after h2 (at the same level) */
h2 ~ p {
color: #555;
margin-bottom: 15px;
padding-left: 20px;
border-left: 3px solid #eee;
}
/* All .card that come after the first .card */
.card ~ .card {
margin-top: 20px;
padding-top: 20px;
}
/* All inputs after the checkbox */
input[type="checkbox"] ~ input[type="text"] {
margin-left: 10px;
max-width: 300px;
}
<h2>Section Title</h2>
<p>First paragraph after h2 (Selected)</p>
<div>Not a paragraph (Not affected)</div>
<p>Second paragraph after h2 (Selected)</p>
<p>Third paragraph after h2 (Selected)</p>
5. Attribute Selector
An attribute selector targets elements based on the attributes they have or the values of those attributes.
Basic Attribute Selectors
/* All elements that have a title attribute */
[title] {
border-bottom: 1px dashed #3498db;
cursor: help;
}
/* All input elements with attribute type="text" */
input[type="text"] {
border: 2px solid #3498db;
padding: 10px 15px;
border-radius: 5px;
font-size: 1rem;
}
/* All input elements with type="email" */
input[type="email"] {
border: 2px solid #27ae60;
padding: 10px 15px;
border-radius: 5px;
}
/* All a elements with target="_blank" */
a[target="_blank"] {
color: #e74c3c;
text-decoration: none;
}
a[target="_blank"]::after {
content: " ↗";
font-size: 0.8em;
}
Attribute Value Selectors
/* [attr^="value"] - attribute STARTS with a specific value */
a[href^="https"] {
color: #27ae60;
font-weight: 600;
}
a[href^="mailto:"] {
color: #9b59b6;
}
/* Attributes that START with "https" will be colored green */
/* [attr$="value"] - attribute ENDS with a specific value */
a[href$=".pdf"] {
color: #e74c3c;
}
a[href$=".pdf"]::before {
content: "📄 ";
}
a[href$=".zip"] {
color: #e67e22;
}
a[href$=".zip"]::before {
content: "📦 ";
}
/* [attr*="value"] - attribute CONTAINS a specific value */
a[href*="youtube"] {
color: #ff0000;
}
a[href*="github"] {
color: #333;
}
a[href*="twitter"] {
color: #1da1f2;
}
/* [attr~="value"] - attribute contains the value in a (space-separated) list */
div[class~="highlight"] {
background-color: #fff3cd;
padding: 15px;
border-radius: 5px;
}
/* [attr|="value"] - attribute starts with the value or is followed by a hyphen */
div[lang|="id"] {
font-family: 'Times New Roman', serif;
}
div[lang|="en"] {
font-family: Arial, sans-serif;
}
<a href="https://example.com">HTTPS Site</a>
<a href="http://example.com">HTTP Site</a>
<a href="mailto:[email protected]">Email</a>
<a href="/document.pdf">PDF Document</a>
<a href="/archive.zip">ZIP Archive</a>
<div lang="id">Indonesian Content</div>
<div lang="en">English Content</div>
<div class="highlight">Box with the highlight class</div>
<div class="highlight special">Box with the highlight and special classes</div>
Attribute Selectors with Specific Values
/* Attribute equality */
input[type="text"] {
border: 2px solid #3498db;
}
/* Attribute combined in a list */
input[type="text"][required] {
border-color: #e74c3c;
background-color: #fff5f5;
}
/* Combined attributes */
a[href^="https"][target="_blank"] {
padding-right: 20px;
background-image: url('external-icon.png');
background-repeat: no-repeat;
background-position: right center;
background-size: 12px;
}
<input type="text" placeholder="Name (required)" required>
<input type="text" placeholder="Name (optional)">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<a href="https://example.com" target="_blank">External Link</a>
<a href="https://example.com">Internal Link</a>
Practice: Form Styling with Advanced Selectors
/* Form Styling */
.form-container {
max-width: 600px;
margin: 40px auto;
padding: 30px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.form-container h2 {
color: #2c3e50;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid #eee;
}
/* Descendant selector for all form groups */
.form-container .form-group {
margin-bottom: 20px;
}
/* Child selector for direct labels */
.form-container .form-group > label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #2c3e50;
}
/* Adjacent sibling: input directly after label */
.form-container label + input,
.form-container label + textarea,
.form-container label + select {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Focus state */
.form-container label + input:focus,
.form-container label + textarea:focus {
border-color: #3498db;
outline: none;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}
/* Attribute selector for required fields */
.form-container input[required] {
border-color: #e74c3c;
}
.form-container input[required]:focus {
border-color: #e74c3c;
box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
}
/* General sibling: all errors after the input */
.form-container input + .error {
color: #e74c3c;
font-size: 0.85rem;
margin-top: 5px;
display: none;
}
.form-container input:invalid + .error {
display: block;
}
/* Attribute selector for email */
.form-container input[type="email"] {
border-color: #27ae60;
}
/* Attribute selector for URL */
.form-container input[type="url"] {
border-color: #9b59b6;
}
/* Select styling */
.form-container select {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
background-color: white;
cursor: pointer;
}
.form-container select:focus {
border-color: #3498db;
outline: none;
}
/* Textarea */
.form-container textarea {
resize: vertical;
min-height: 120px;
font-family: inherit;
}
/* Button */
.form-container .btn-submit {
width: 100%;
padding: 14px;
background-color: #3498db;
color: white;
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
}
.form-container .btn-submit:hover {
background-color: #2980b9;
}
.form-container .btn-submit:active {
transform: translateY(2px);
}
/* Disabled state */
.form-container input:disabled,
.form-container textarea:disabled {
background-color: #f5f5f5;
cursor: not-allowed;
opacity: 0.7;
}
<div class="form-container">
<h2>Contact Form</h2>
<div class="form-group">
<label for="name">Full Name *</label>
<input type="text" id="name" required placeholder="Enter your full name">
<div class="error">Name is required</div>
</div>
<div class="form-group">
<label for="email">Email *</label>
<input type="email" id="email" required placeholder="[email protected]">
<div class="error">Email format is not valid</div>
</div>
<div class="form-group">
<label for="website">Website</label>
<input type="url" id="website" placeholder="https://example.com">
</div>
<div class="form-group">
<label for="subject">Subject</label>
<select id="subject">
<option value="">Select a subject</option>
<option value="umum">General Question</option>
<option value="support">Technical Support</option>
<option value="bisnis">Business Cooperation</option>
</select>
</div>
<div class="form-group">
<label for="message">Message *</label>
<textarea id="message" required placeholder="Write your message..."></textarea>
<div class="error">Message is required</div>
</div>
<button type="submit" class="btn-submit">Send Message</button>
</div>
Practice: Link Styling with Attribute Selectors
/* Link Styling */
.link-list {
max-width: 600px;
margin: 40px auto;
padding: 20px;
}
.link-list h2 {
margin-bottom: 20px;
color: #2c3e50;
}
.link-list a {
display: block;
padding: 12px 15px;
margin-bottom: 8px;
border-radius: 5px;
text-decoration: none;
transition: all 0.3s ease;
}
/* Default link */
.link-list a {
color: #3498db;
background-color: #f8f9fa;
}
/* External link */
.link-list a[href^="https"] {
color: #27ae60;
background-color: #f0faf4;
border-left: 4px solid #27ae60;
}
/* Email link */
.link-list a[href^="mailto:"] {
color: #9b59b6;
background-color: #f8f0fc;
border-left: 4px solid #9b59b6;
}
/* PDF link */
.link-list a[href$=".pdf"] {
color: #e74c3c;
background-color: #fef5f5;
border-left: 4px solid #e74c3c;
}
/* YouTube link */
.link-list a[href*="youtube"] {
color: #ff0000;
background-color: #fff5f5;
border-left: 4px solid #ff0000;
}
/* GitHub link */
.link-list a[href*="github"] {
color: #333;
background-color: #f5f5f5;
border-left: 4px solid #333;
}
.link-list a:hover {
transform: translateX(5px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
<div class="link-list">
<h2>Link List</h2>
<a href="https://example.com">External Site (HTTPS)</a>
<a href="mailto:[email protected]">Send Email</a>
<a href="/document.pdf">Download PDF Document</a>
<a href="https://youtube.com/watch?v=abc123">YouTube Video</a>
<a href="https://github.com/user/repo">GitHub Repository</a>
<a href="/about.html">About Us (Internal)</a>
</div>
Summary
CSS advanced selectors include descendant (), child (>), adjacent sibling (+), general sibling (~), and attribute selectors ([attr]). These selectors enable more precise and efficient styling, reducing the need for extra classes in the HTML. Combining these selectors allows you to write CSS that is more modular and easier to maintain.