CSS Selectors Explained By Going Car Shopping

If you have ever seen a car dealership, then you can understand CSS selectors.

When you step onto the lot of a car dealership, you’re instantly surrounded by different cars, colors, and years.

And of course there’s that aggressive salesperson. But let’s leave them out this simulation.

Cars — and car features — can be categorized using the same system as CSS selectors. So if you can understand the different ways to segment cars in a dealership lot, he market, then you can understand CSS selectors.

Let’s start off by imaging a car dealership, using HTML:

	<section>
	<div class='sedan blue 2015 leatherSeats'></div>
	<div class='sedan red 2012 hatchback'></div>
	/** 10 more */
	</section>
	<section>
	<div id="123xyz" class='convertible purple audi v8'></div>
	<div class='convertible green mustang dualExhaust'></div>
	/** 10 more */
	</section>
	<section>
	<div id="789abc" class='truck 2014 seatWarmer crewCab'></div>
	<div class='truck 2013 powerSteering'></div>
	/** 10 more */
	</section>

view raw

carLotBasic.html

hosted with ❤ by GitHub

Now we’re going to cover four different ways of styling your HTML elements:

By the type of element i.e. div
By class, i.e. ‘blue’
By id, i.e. ‘123xyz’
By relationship to other elements

By Type of Element

In our HTML above, every div is really a car of some sort. It could be a sedan, truck, or a convertible. But those are just variations of cars.

If we wanted to add styling to every car, we would have to think about the things that every car on this lot has in common.

Here’s some example CSS:

	div{
	wheels:4;
	max-height:9;
	material:steel;
	}

view raw

carExample.css

hosted with ❤ by GitHub

All right, I’m making this basic to start, OK? And yes, I made up some CSS properties to make this work.

Anyway, it would be fair to say that every car in this lot is made of steel, has 4 wheels, and has a maximum height of 9 feet. So every time we add a

to our HTML, it will have these properties by default.

In fact, we can take this car concept even further. We can break up the interior of the car into HTML as well:

	<div class='sedan'>
	<div class='frontRow'>
	<div class='window'></div>
	<div class='seat'></div>
	<div class='seat'></div>
	<div class='window'></div>
	</div>
	<div class='backRow'>
	<div class='window'></div>
	<div class='seat'></div>
	<div class='seat'></div>
	<div class='seat'></div>
	<div class='window'></div>
	</div>
	</div>

view raw

sedanExample.html

hosted with ❤ by GitHub

What are some properties that the seats and windows might have? They must be shared by all windows and seats! We’ll do a deep dive on this later in this article.

Using Class

Check out our first HTML snippet, which covers all of the cars on the lot. You can see that each car

has a series of classes. These classes are used to assign common properties to all class members.

Let’s say we’re assigning the class ‘2005’ to different sedans, trucks, and convertibles. Well, what’s one trait that many cars had in common in 2005? CD players! So let’s do that in pseudo-CSS.

	.year2005{
	muiscPlayer: cd;
	}

view raw

classEx1.css

hosted with ❤ by GitHub

What if we have the class “crewCab”? Trucks with crew cabs have 2 rows of seats, with 5 seats total. So, we might want to assign this class specifically to trucks. We can combine classes by stringing them together.

	.truck.crewCab{
	seats: 5;
	}

view raw

truck.css

hosted with ❤ by GitHub

Classes are a more specific way to reference HTML elements. So, let’s say that all vehicles are made of steel, by default. But you want some vehicles to be made of aluminum. You can create an “aluminum” class that will override the material property of all members of the class.

	div{
	material:steel;
	}

	.aluminum{
	material:aluminum;
	}

view raw

carmaterial.css

hosted with ❤ by GitHub

Using ID

HTML elements can have an ID. This is the most specific way to reference a single element, and it overrides all other styles. This unique identifier is kind of like the element’s license plate.

So let’s say you have one car and it has the license plate “123 XYZ”. This car has a unique purple color, because for some reason the owner demanded it. Here is that one element in CSS.

	#123xyz{
	color:weirdpurple;
	}

view raw

carColor.css

hosted with ❤ by GitHub

Elements have a 1-to-1 relationship with IDs. Just like with cars and license plates, no two cars can have the same license plate. This is also the most powerful way to identify an element, so you can create unique exceptions to all other rules that an element should be obeying.

Relationships Between Elements

Let’s say you want to make sure that cars with the “leatherSeats” class have seats made out of leather. Check out the second HTML snippet from the “Type of Element” section.

You could have also given each div with class “seat” the class “leather” as well. But here’s the thing: that wouldn’t allow you to select just the cars with leather seats as a whole. You would only be able to select the seats themselves.

So, we want to give the entire car a “leatherSeats” class to make sure we can select the whole div and its children.

	.leatherSeats .seat{
	material:leather;
	}

view raw

carLeather.css

hosted with ❤ by GitHub

The CSS above will select all elements with class “seat” within a “leatherSeats” container.

Now let’s say you want to make sure that the front passenger seat has seat warmers. You can use the “~” selector, which is known as the sibling selector. It allows you to assign styles to elements relative to their neighbors.

So you can say:

	.driverSeat ~ .seat{
	seatWarmers:true;
	}

view raw

driverSeat.css

hosted with ❤ by GitHub

Here’s one last example. Let’s say one particular make and model had a bizarre, random feature. For example, a 2008 Chevy truck might have had DVD players in the back seats.

Here’s how you would turn that into CSS:

You need to start with multiple classes, since this is a highly specific type of car. This might be “div.truck.chevy.year2008”.
Then, think about how you will be able to select the back seats, specifically. You could give the row an extra class, like “.backRow”. Or, you could use the :last-child selector.
Finally, you need to select the seats themselves.

Answer:

	div.chevy.truck.year2008 .backRow .seat{
	media:dvdPlayer;
	}

view raw

uniqueCar.css

hosted with ❤ by GitHub

If you enjoyed this post, you may also enjoy my other explanations of challenging CSS and JavaScript topics, such as positioning, Model-View-Controller, and callbacks.

CodeAnalogies Blog

Visual explanations of HTML, CSS and JavaScript concepts