CSS Summary | AI Coding Educator

CSS Selectors Summary

CSS selectors target HTML elements so CSS declarations can style them. A selector can be an element name, class, ID, pseudo-class, or selector pattern. The property is the thing being changed, and the value is the setting assigned to it.

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

In these examples, a, a:hover, and p > a are selectors. font-style, color, and padding are properties. italic, red, and 10px are values.

Basic Selectors

You will use element, class, and ID selectors more than any other. They let CSS find elements by tag name, reusable class name, or unique ID.

<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 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.

Element selectors are useful when you want every matching HTML element to share the same style. For example, you can style every paragraph or every section on a page.

<section>
	<p>Text</p>
</section>

section {
	background: blue;
}
p {
	font-style: italic;
}

ID Selector

An ID selector targets one specific HTML element. An ID value should be unique on a page. IDs are useful for unique page areas, anchor links, JavaScript hooks, or one-off styling.

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

#unique-selector {
	background: red;
}

Class Selector

A class selector targets one or more elements that share the same class name. 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>

.shared-selector {
	color: green;
}

Grouping Selector

If you want to apply one set of styles to many selectors, separate the selectors with commas.

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

Combinator Selectors

Combinator selectors use relationships between elements to target HTML more precisely. They can target elements inside other elements, direct children, or sibling elements at the same level.

Descendant Selector

The descendant selector matches elements inside another element. For example, you can target every paragraph anywhere inside a specific wrapper.

.wrapper p {
	color: blue;
}

Child Selector

The child selector > targets only direct children of another element. A direct child has no extra HTML element between it and the parent.

.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 the next matching element that comes immediately after another element. Both elements must share the same parent.

.first + p {
	color: blue;
}

<p class="first">First paragraph</p>
<p>Targeted paragraph</p>
<p>Not targeted paragraph</p>

General Sibling Selector

The general sibling selector ~ targets matching sibling elements that come after another element. The elements must share the same parent, but they do not need to be directly next to each other.

.first ~ p {
	color: blue;
}

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

Selectors