CSS Selectors

Learn how to target HTML elements with CSS selectors

Introduction to CSS Selectors

CSS selectors are used to target HTML elements that you want to style. They are the foundation of CSS and allow you to apply styles to specific elements or groups of elements.

Types of CSS Selectors:

Element Selectors: Target HTML elements by tag name
Class Selectors: Target elements with specific class attributes
ID Selectors: Target elements with specific ID attributes
Attribute Selectors: Target elements based on attributes
Pseudo-class Selectors: Target elements in specific states
Combinator Selectors: Target elements based on relationships

1. Element Selectors

Element selectors target HTML elements by their tag name.

                            
/* Target all paragraphs */
p {
    color: blue;
    font-size: 16px;
}

/* Target all headings */
h1 {
    color: red;
    font-size: 32px;
}

/* Target all links */
a {
    color: green;
    text-decoration: none;
}

2. Class Selectors

Class selectors target elements with a specific class attribute. They start with a dot (.).

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

/* Target elements with class="button" */
.button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}

/* HTML Usage */
<p class="highlight">This paragraph is highlighted</p>
<button class="button">Click me</button>

3. ID Selectors

ID selectors target elements with a specific ID attribute. They start with a hash (#).

                            
/* Target element with id="header" */
#header {
    background-color: navy;
    color: white;
    padding: 20px;
}

/* Target element with id="main-content" */
#main-content {
    max-width: 800px;
    margin: 0 auto;
}

/* HTML Usage */
<div id="header">Website Header</div>
<div id="main-content">Main content here</div>

4. Universal Selector

The universal selector (*) targets all elements on the page.

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

/* Reset all elements */
* {
    font-family: Arial, sans-serif;
}

5. Grouping Selectors

You can group multiple selectors to apply the same styles to different elements.

                            
/* Group selectors */
/* Apply same styles to multiple elements */
h1, h2, h3 {
    color: navy;
    font-family: Georgia, serif;
}

/* Group classes and IDs */
.primary-button, .secondary-button, #special-button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

6. Descendant Selectors

Descendant selectors target elements that are inside other elements.

                            
/* Target paragraphs inside divs */
div p {
    color: gray;
    line-height: 1.6;
}

/* Target links inside navigation */
nav a {
    color: white;
    text-decoration: none;
}

/* Target list items inside unordered lists */
ul li {
    list-style-type: disc;
    margin-bottom: 5px;
}

7. Child Selectors

Child selectors target direct children of an element using the > symbol.

                            
/* Target direct children only */
div > p {
    font-weight: bold;
}

/* Target direct list items */
ul > li {
    border-bottom: 1px solid #ccc;
}

/* HTML Example */
<div>
    <p>Direct child - will be bold</p>
    <section>
        <p>Not direct child - won't be bold</p>
    </section>
</div>

8. Attribute Selectors

Attribute selectors target elements based on their attributes.

                            
/* Target elements with specific attribute */
[type="text"] {
    border: 1px solid #ccc;
    padding: 5px;
}

/* Target elements with attribute containing value */
[class*="btn"] {
    cursor: pointer;
}

/* Target links with specific href */
a[href^="https"] {
    color: green;
}

/* Target images with alt attribute */
img[alt] {
    border: 2px solid blue;
}

9. Pseudo-class Selectors

Pseudo-class selectors target elements in specific states.

                            
/* Target links on hover */
/* Hover state */
a:hover {
    color: red;
    text-decoration: underline;
}

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

/* Last child */
li:last-child {
    border-bottom: none;
}

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

/* Focus state */
input:focus {
    outline: 2px solid blue;
}

Selector Specificity

Specificity Hierarchy (Highest to Lowest):

Inline styles: style="..." (1000 points)
IDs: #myId (100 points)
Classes, attributes, pseudo-classes: .myClass, [type="text"], :hover (10 points)
Elements and pseudo-elements: div, p, ::before (1 point)

Specificity Examples:


/* Specificity: 1 (element) */
p { color: black; }

/* Specificity: 10 (class) */
.text { color: blue; }

/* Specificity: 100 (ID) */
#main-text { color: red; }

/* Specificity: 111 (ID + class + element) */
#main-text.highlight p { color: green; }

/* The rule with highest specificity wins */

Best Practices

CSS Selector Best Practices:

Use classes for reusable styles
Use IDs sparingly, mainly for unique elements
Avoid overly specific selectors to maintain flexibility
Use semantic class names that describe purpose, not appearance
Keep selectors simple for better performance