Skillversitas

Basic CSS Selectors

Selectors are the most important part of CSS. A selector determines which HTML element will be styled. Understanding the various types of selectors allows you to write CSS that is efficient, specific, and easy to maintain.

1. Element/Type Selector

An element selector targets all HTML elements based on their tag name. This is the most basic selector.

/* Target all h1 elements */
h1 {
    color: #2c3e50;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

/* Target all p elements */
p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* Target all a elements */
a {
    color: #3498db;
    text-decoration: none;
}

a:hover {
    color: #2980b9;
    text-decoration: underline;
}

<h1>Page Title</h1>
<p>First paragraph with a link <href="#">to here</a>.</p>
<p>Second paragraph without a link.</p>

2. Class Selector

A class selector uses a dot (.) followed by the class name. A class can be applied to many elements, and a single element can have multiple classes.

/* Class container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Class text-primary */
.text-primary {
    color: #3498db;
}

/* Class text-danger */
.text-danger {
    color: #e74c3c;
}

/* Class bg-light */
.bg-light {
    background-color: #f8f9fa;
}

/* Class card */
.card {
    background: white;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Class btn */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Class modifier for btn */
.btn-primary {
    background-color: #3498db;
    color: white;
}

.btn-primary:hover {
    background-color: #2980b9;
}

.btn-success {
    background-color: #27ae60;
    color: white;
}

.btn-success:hover {
    background-color: #229954;
}

<div class="container">
    <div class="card">
        <h2 class="text-primary">Card Title</h2>
        <p>Card content with the bg-light class for the background.</p>
        <button class="btn btn-primary">Primary Button</button>
        <button class="btn btn-success">Success Button</button>
    </div>
</div>

Multi-Class

A single element can have multiple classes, separated by spaces:

<!-- Element with 3 classes -->
<p class="text-primary bg-light card">
    Paragraph with 3 classes: text-primary, bg-light, and card.
</p>

3. ID Selector

An ID selector uses the hash symbol (#) followed by the ID name. An ID must be unique within a single HTML document and can only be used once.

/* ID header */
#header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 20px;
    text-align: center;
}

#header h1 {
    font-size: 3rem;
    margin-bottom: 15px;
}

#header p {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* ID sidebar */
#sidebar {
    width: 300px;
    background-color: #f8f9fa;
    padding: 20px;
    border-left: 1px solid #ddd;
}

/* ID main-content */
#main-content {
    flex: 1;
    padding: 30px;
}

<div id="header">
    <h1>Welcome</h1>
    <p>Website with ID selector</p>
</div>

<div id="sidebar">
    <h3>Sidebar</h3>
    <p>Navigation menu in the sidebar.</p>
</div>

<div id="main-content">
    <h2>Main Content</h2>
    <p>Content of the main area of the website.</p>
</div>

4. Universal Selector

The universal selector (*) targets all elements in the document. It is often used for styling resets.

/* Reset - remove default margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Selector with pseudo-class */
*:not(.no-highlight) {
    transition: background-color 0.3s ease;
}

<!-- All elements above will be reset -->
<h1>Title</h1>
<p>Paragraph</p>
<div>Div</div>

Warning

The universal selector has low specificity (0,0,0) and can affect performance if overused. Use it wisely.

5. Grouping Selector

A grouping selector allows multiple selectors to share the same declarations, separated by commas (,).

/* Grouping - all headings share the same style */
h1, h2, h3, h4, h5, h6 {
    color: #2c3e50;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 15px;
}

/* Grouping - all lists without bullets */
ul, ol {
    list-style: none;
    padding: 0;
}

/* Grouping - all inputs get a base style */
input, textarea, select {
    font-family: inherit;
    font-size: 1rem;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.3s ease;
}

/* Grouping with classes */
.card, .panel, .widget {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<div class="card">
    <p>Card content</p>
</div>

<div class="panel">
    <p>Panel content</p>
</div>

Specificity

Specificity determines which selector "wins" when there is a conflict. Specificity order from low to high:

Selector Specificity Example
Element 0,0,1 p, h1, div
Class 0,1,0 .text, .card
ID 1,0,0 #header, #main
Inline 1,0,0,0 style="..." 
/* Specificity: 0,0,1 */
p {
    color: gray;
}

/* Specificity: 0,1,0 - overrides element */
.text {
    color: blue;
}

/* Specificity: 1,0,0 - overrides class */
#special {
    color: red;
}

/* Result: text with class="text" is blue
   text with id="special" is red
   plain text is gray */

Best Practices with Selectors

Example 1: Navigation Styling

/* Navigation */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background-color: #2c3e50;
}

.nav-brand {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-links a {
    color: #ecf0f1;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #3498db;
}

/* Active state */
.nav-links .active a {
    color: #3498db;
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
}

<nav class="nav">
    <a href="#" class="nav-brand">BrandLogo</a>
    <ul class="nav-links">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Example 2: Card Layout

/* Card System */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    padding: 30px;
}

.card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-8px);
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-body {
    padding: 20px;
}

.card-title {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 10px;
}

.card-text {
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}

.card-footer {
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #eee;
}

/* ID for a special container */
#featured-cards {
    background-color: #ecf0f1;
    padding: 40px 0;
}

<div id="featured-cards">
    <div class="card-grid">
        <div class="card">
            <img src="image1.jpg" alt="Image 1" class="card-image">
            <div class="card-body">
                <h3 class="card-title">Card Title 1</h3>
                <p class="card-text">A short description about the content of the first card.</p>
            </div>
            <div class="card-footer">
                <a href="#" class="btn btn-primary">Read More</a>
            </div>
        </div>
    </div>
</div>

Example 3: Form Styling with IDs and Classes

/* Form Container - ID */
#contact-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Form Group - Class */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* Validation States */
.form-group.error input {
    border-color: #e74c3c;
}

.form-group.success input {
    border-color: #27ae60;
}

.form-error {
    color: #e74c3c;
    font-size: 0.85rem;
    margin-top: 5px;
}

.form-success {
    color: #27ae60;
    font-size: 0.85rem;
    margin-top: 5px;
}

<form id="contact-form">
    <div class="form-group">
        <label for="name">Full Name</label>
        <input type="text" id="name" name="name" placeholder="Enter your name">
        <div class="form-error">Name is required</div>
    </div>

    <div class="form-group success">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" value="[email protected]">
        <div class="form-success">Email is valid</div>
    </div>

    <div class="form-group">
        <label for="message">Message</label>
        <textarea id="message" name="message" rows="5" placeholder="Write your message..."></textarea>
    </div>

    <button type="submit" class="btn btn-primary">Send Message</button>
</form>

Summary

CSS has five basic selectors: element (h1), class (.), ID (#), universal (*), and grouping (comma). The class selector is the most flexible because it can be reused, while the ID selector is unique and has higher specificity. Understanding specificity is the key to controlling how CSS is applied to HTML elements.