🎯 CSS Selectors

Targeting HTML Elements

Understanding Selectors

CSS selectors are patterns used to select and style HTML elements. Mastering selectors is key to efficient CSS.

💻 Basic Selectors

Universal Selector

/* Selects all elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Element Selector

/* Selects all 
 elements */
p {
    color: #333;
    line-height: 1.6;
}

/* Selects all 
 elements */
h1 {
    font-size: 2rem;
    font-weight: bold;
}

Class Selector

/* Selects elements with class="highlight" */
.highlight {
    background-color: yellow;
    padding: 5px;
}

/* Multiple classes */
.button.primary {
    background-color: blue;
    color: white;
}

ID Selector

/* Selects element with id="header" */
#header {
    background-color: #333;
    color: white;
}

/* IDs should be unique per page */
#main-content {
    max-width: 1200px;
    margin: 0 auto;
}

🔗 Combinator Selectors

Descendant Selector (Space)

/* Selects all 
 inside 
 at any level */
div p {
    color: blue;
}

/* Nested example */
.container .box p {
    font-size: 14px;
}

Child Selector (>)

/* Selects only direct 
 children of 
 */
div > p {
    margin-bottom: 10px;
}

ul > li {
    list-style-type: square;
}

Adjacent Sibling (+)

/* Selects 
 immediately after 
 */
h1 + p {
    font-weight: bold;
    margin-top: 0;
}

.box + .box {
    margin-left: 20px;
}

General Sibling (~)

/* Selects all 
 siblings after 
 */
h1 ~ p {
    color: #666;
}

.header ~ section {
    padding-top: 20px;
}

🎨 Attribute Selectors

/* Has attribute */
[type] {
    border: 1px solid #ccc;
}

/* Exact value */
[type="text"] {
    padding: 10px;
}

/* Contains value */
[class*="btn"] {
    cursor: pointer;
}

/* Starts with */
[href^="https"] {
    color: green;
}

/* Ends with */
[href$=".pdf"] {
    background: url('pdf-icon.png') no-repeat;
}

/* Word in list */
[title~="flower"] {
    border: 2px solid pink;
}

🔍 Pseudo-class Selectors

/* Link states */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }

/* First/last child */
li:first-child {
    font-weight: bold;
}

li:last-child {
    border-bottom: none;
}

/* Nth child */
tr:nth-child(odd) {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: white;
}

li:nth-child(3) {
    color: red;
}

/* Not selector */
p:not(.exclude) {
    line-height: 1.6;
}

/* Focus state */
input:focus {
    border-color: blue;
    outline: none;
}

✨ Pseudo-element Selectors

/* First line/letter */
p::first-line {
    font-weight: bold;
}

p::first-letter {
    font-size: 2em;
    float: left;
    margin-right: 5px;
}

/* Before/after */
.quote::before {
    content: '"';
    font-size: 2em;
    color: #999;
}

.quote::after {
    content: '"';
    font-size: 2em;
    color: #999;
}

/* Selection */
::selection {
    background-color: yellow;
    color: black;
}

/* Placeholder */
input::placeholder {
    color: #999;
    font-style: italic;
}

📊 Selector Grouping

/* Multiple selectors - same styles */
h1, h2, h3 {
    font-family: Arial, sans-serif;
    color: #333;
}

.button, .btn, input[type="submit"] {
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

🎯 Practical Examples

/* Navigation menu styling */
nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline-block;
}

nav ul li a {
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}

nav ul li a:hover {
    background-color: #f0f0f0;
}

/* Form styling */
form input[type="text"],
form input[type="email"],
form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

form input:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0,123,255,0.3);
}

form input:invalid {
    border-color: #dc3545;
}

/* Card component */
.card > .card-header {
    background-color: #f8f9fa;
    padding: 15px;
    border-bottom: 1px solid #dee2e6;
}

.card > .card-body {
    padding: 15px;
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

🎯 Key Takeaways