X

CSS Selectors Summary

CSS selectors are ways to target HTML elements to affect how they look or what they do. Selectors can be the names of HTML elements or symbols that affect behavior or targetting.

a {
	font-style: italic;
}
a:hover {
	color: red;
}
p > a {
	padding: 10px;
}

Basic Selectors

You will use the element, class, and identifier selectors more than any other. They allow you to create or mark an HTML element with a name you can use to target it for styling with CSS.

Give a paragraph a class and then use that class in CSS to assign the color.

<div id="unique-selector">
	<p class="shared-selector">Stuff</p>
	<p class="shared-selector">More Stuff</p>
</div>

#unique-selector {
	background: red;
}
.shared-selector {
	color: green;
}

Element Selector

The most basic and most powerful selector is the HTML element name. If you use the <audio> element, you can reference that element as “audio” in your CSS. The name of the element is its selector.

You can also make any element you want and select it with its name. This is a powerful tool that lets you make your HTML easy to understand based on its purpose. 

<amazing>
	<p>Text</p>
</amazing>

amazing {
	color: blue;
}
p {
	font-style: italic;
}

ID Selector

The ID selector is a unique name given to an individual HTML element. IDs can only be used once per page. They should be used for the basic page framework. Naming sections of stuff.

They also have many more advanced uses in targeting for CSS and Javascript.

<div id="unique-selector"></div>

Class Selector

The class selector is a shared name given to one or more elements. Classes can be used many times on a page allowing you to control the appearance of many elements at once. 

<div class="shared-selector"></div>
<div class="shared-selector"></div>

Grouping Selector

If you want to apply one set of styles to many elements, you string selectors together in CSS using commas.

div, p, .content {
	padding: 0;
}

Combinator Selectors

You can use a number of selector symbols to be more specific when targeting HTML elements using CSS.

Descendent Selector

The descendent selector matches all elements inside another one. So you could target every paragraph anywhere inside a specific element on your page. 

.wrapper p {
	color: blue;
}

Child Selector

The child selector “>” allows you to choose only those elements inside another that are direct children of that element, meaning there is nothing between them. 

.wrapper > p {
	color: blue;
}

<div class="wrapper">
	<p>Child of wrapper</p>
	<div class="box">
		<p>Not child of wrapper</p>
	</div>
	<p>Child of wrapper</p>
</div>

Adjacent Sibling Selector

The adjacent sibling selector (+) targets an element directly after another on the page. This does not impact what is inside the first element and only elements at the same level.

.first + p {
	color: blue;
}

<p class="first">First paragraph</p>
<p>Targetted paragraph</p>
<p>Not targetted paragraph</p>

General Sibling Selector

The general sibling selector (~) targets all specified elements on the page at the same level.

.first ~ p {
	color: blue;
}

<p class="first">First paragraph</p>
<p>Targetted paragraph</p>
<p>Targetted paragraph</p>

Code Sandbox