CSS Selectors: Mastering Basic and Relational Patterns
Tech
1
Fundamental Selectors
Element selectors target every instance of a specific HTML tag on the page.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* Targets all <h2> tags */
h2 {
font-family: Arial, sans-serif;
}
/* Targets all <em> tags */
em {
font-style: italic;
color: purple;
}
</style>
</head>
<body>
<h2>Main Heading <em>with emphasis</em></h2>
<p>Some paragraph text.</p>
<h2>Another Heading</h2>
</body>
</html>
Class selectors allow you to apply styles to multiple elements regardless of their tag type by using a shared attribute.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* Selects any element with class="highlight" */
.highlight {
background-color: #fff3cd;
padding: 5px;
}
</style>
</head>
<body>
<p class="highlight">This paragraph is highlighted.</p>
<div class="highlight">This div is also highlighted.</div>
</body>
</html>
ID selectors are used to target a single unique element on the page.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* Selects the element with id="unique-header" */
#unique-header {
text-transform: uppercase;
border-bottom: 2px solid black;
}
</style>
</head>
<body>
<h1 id="unique-header">Specific Header</h1>
<h1>Regular Header</h1>
</body>
</html>
Specificity Hierarchy
When multiple selectors apply to the same element, the browser follows a priority order: ID selectors override Class selectors, wich in turn override Element selectors.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* Low priority */
p {
color: grey;
}
/* Medium priority */
.special-text {
color: blue;
}
/* High priority (Uncomment to see effect) */
/*
#top-paragraph {
color: orange;
}
*/
</style>
</head>
<body>
<p class="special-text" id="top-paragraph">Text content here.</p>
</body>
</html>
Relational Selectors and Layout Basics
The <div> element is a block-level container (stacks vertically), while <span> is an inline container (flows with text). These are often used together for layout structure.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container {
border: 2px dashed #333;
margin-bottom: 10px;
}
.inline-wrapper {
border: 1px solid green;
}
</style>
</head>
<body>
<div class="container">
Block Element 1
</div>
<div class="container">
Block Element 2
</div>
<span class="inline-wrapper">Inline A</span>
<span class="inline-wrapper">Inline B</span>
</body>
</html>
Relational selectors allow styling based on document structure.
- Descendant Selector (space): Targets all nested elemnets inside a parent.
- Child Selector (>): Targets only direct children of a parent.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* Child Selector: Only direct <li> children of .menu */
.menu > li {
list-style-type: none;
background-color: lightblue;
}
/* Descendant Selector: All <a> tags inside .menu */
.menu a {
text-decoration: none;
color: darkblue;
}
</style>
</head>
<body>
<ul class="menu">
<li>Item 1</li>
<li>Item 2
<ul>
<!-- This li is NOT a direct child of .menu, so it won't have lightblue background -->
<li>Sub-item (Background not lightblue)</li>
</ul>
</li>
</ul>
</body>
</html>
