CSS Lesson 4 – CSS Selectors | Dataplexa

Lesson 4

CSS Selectors

Learn how to target specific HTML elements with selectors and start styling your travel website with precision.

CSS selectors are like a GPS system for your styles — they tell the browser exactly which HTML elements to style. Think of them as addresses that help CSS find the right elements on your webpage. When you write CSS, you need two things: a selector (who gets styled) and declarations (what styles to apply). The selector comes first, followed by curly braces containing your style rules.

selector

{

property

:

value

;

}

Who to style

What to change

How to change it

Element Selectors

The simplest selectors target HTML elements by their tag name. When you want to style all paragraphs, all headings, or all images the same way, element selectors are your best friend. The WanderLust team wants to make all their headings use the brand's signature sky blue color. Here's how element selectors work:

/* Style all h1 headings on WanderLust site */
h1 {
  color: #0ea5e9; /* Sky blue brand color */
  font-weight: bold;
}

/* Style all paragraphs for better readability */
p {
  font-size: 16px;
  line-height: 1.6; /* Breathing room between lines */
}

What just happened?

Every h1 element automatically got the sky blue color, and every p element got bigger text with better spacing. Element selectors apply styles to all matching tags at once.

Class Selectors

Class selectors target elements with specific class attributes. Classes are like name tags you can attach to any HTML element. Unlike element selectors that style all tags of one type, classes let you pick and choose exactly which elements get styled. Class selectors start with a dot (.) followed by the class name. You can use the same class on multiple elements, and each element can have multiple classes. The WanderLust team wants to highlight their special destination cards differently from regular content. Here's how classes work:

/* Style elements with class="destination-card" */
.destination-card {
  background: #f8fafc; /* Light gray background */
  border-radius: 12px; /* Rounded corners */
  padding: 20px; /* Space inside the card */
  margin: 16px 0; /* Space above and below */
}

/* Style elements with class="featured" */
.featured {
  border: 3px solid #0ea5e9; /* Sky blue border */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow */
}

What just happened?

The .destination-card class styled all three cards with gray backgrounds and rounded corners. The Bali card has both classes, so it got the basic card styling PLUS the special .featured border and shadow.

ID Selectors

ID selectors target one specific element with a unique id attribute. Think of IDs like social security numbers — each one should be unique on your webpage. ID selectors start with a hash symbol (#) followed by the ID name. IDs are perfect for one-of-a-kind elements like your main navigation, site header, or footer. They're also stronger than class selectors when multiple styles conflict. The WanderLust team wants to style their unique page header differently from everything else:

/* Style the element with id="site-header" */
#site-header {
  background: linear-gradient(135deg, #0ea5e9, #f97316);
  color: white;
  text-align: center;
  padding: 40px 20px;
}

/* Style the element with id="main-navigation" */
#main-navigation {
  background: #0f172a; /* Dark background */
  padding: 15px 0;
  text-align: center;
}

What just happened?

The #site-header ID gave the header a beautiful gradient background from sky blue to sunset orange. The #main-navigation ID styled just the navigation bar with a dark background. Each ID targets exactly one element.

Combining Selectors

You can combine selectors to be more specific about which elements to style. This gives you laser-precise control over your styling. Think of it like giving more detailed directions — instead of "the house," you might say "the blue house on Oak Street." Here are the most useful selector combinations:

Descendant Selector

Target elements inside other elements

.card p { color: blue; }

Multiple Classes

Target elements with multiple classes

.card.featured { border: red; }

Element + Class

Target specific elements with a class

h2.title { font-size: 24px; }

Comma Grouping

Apply same styles to multiple selectors

h1, h2, h3 { color: navy; }

The WanderLust team wants to style paragraphs differently when they appear inside destination cards, and make their price text stand out:

/* Style paragraphs only inside destination cards */
.destination-card p {
  color: #64748b; /* Subtle gray text */
  margin-bottom: 15px;
}

/* Style elements that have BOTH classes */
.price.special-offer {
  background: #f97316; /* Orange background */
  color: white;
  padding: 8px 12px;
  border-radius: 20px;
  font-weight: bold;
}

/* Style multiple headings the same way */
h1, h2, h3 {
  font-family: Georgia, serif; /* Elegant serif font */
}

What just happened?

The descendant selector .destination-card p styled paragraphs only inside cards (not other paragraphs). The .price.special-offer selector only styled the first price because it has both classes. The comma selector styled all headings with the same elegant font.

Attribute Selectors

Attribute selectors target elements based on their HTML attributes — not just class and id, but any attribute like type, href, or custom attributes. They're incredibly powerful for styling forms, links, and dynamic content. Attribute selectors use square brackets and can match attributes in different ways:

[type="email"] — exact match
[href*="wanderlust"] — contains text
[class^="btn-"] — starts with
[src$=".jpg"] — ends with

The WanderLust team wants to style their booking form inputs differently based on their type, and highlight external links:

/* Style email input fields */
input[type="email"] {
  border: 2px solid #0ea5e9; /* Sky blue border */
  border-radius: 8px;
  padding: 12px;
}

/* Style submit buttons */
input[type="submit"] {
  background: #f97316; /* Orange background */
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
}

/* Style links that contain "external" in href */
a[href*="external"] {
  color: #dc2626; /* Red color for external links */
  text-decoration: underline;
}

What just happened?

The input[type="email"] selector found only the email input and gave it a sky blue border. The submit button got orange styling, while the phone input stayed default because it has type="tel". The external link got red styling because its href contains "external".

Selector Priority

When multiple CSS rules target the same element, the browser needs to decide which styles win. This system is like a ranking system where some selectors are stronger than others. Here's the priority order from weakest to strongest:

Element Selectors

h1, p, div — Weakest priority

Class & Attribute Selectors

.card, [type="email"] — Medium priority

ID Selectors

#header, #navigation — Strongest priority

When the WanderLust team has conflicting styles, the more specific selector wins. If a paragraph has both element and class styles applied, the class styles take priority.

Pro Tip

Keep your selectors simple when possible. Instead of writing long, complex selectors, use well-named classes. Your future self will thank you when you need to maintain the code!

Quiz

Up Next: Specificity and Cascade

Discover how CSS resolves conflicts when multiple rules target the same element, and master the cascade system that determines which styles actually get applied.

← Previous Course Index Next →