Basic Selectors

Makiel [Muh-Keel]

Last edited 459 days ago by Makiel [Muh-Keel].

Element, class, and ID selectors

CSS has many ways to specify the selector. Three common selector types are:

The element selector matches elements with the specified element names. Ex: p { color: blue; } selects all p elements.

The class selector, specified with a period character followed by the class name, matches elements that have the specified class name. Ex: .notice { color: blue; } selects all elements with a class="notice" attribute.

The ID selector, specified with a hash character followed by the ID name, matches the element that has the specified ID. Ex: #byLine { color: blue; } selects the element with the id="byLine" attribute.

Descendant Selector

The descendant selector, specified with a selector followed by a space and another selector, matches elements that are contained in other elements. Ex: h2 em { color: blue; } selects em elements contained in h2 elements.

Pseudo-class selector

The pseudo-class selector, specified with a colon character followed by a pseudo-class name, matches elements based on user behavior or element metainformation. Example pseudo-class selectors include:

:disabled - Element is disabled.

:hover - Mouse is hovering over the element.

:empty - Element has no child elements.

:lang(language) - Element contains text in a specified language.

:nth-child(n) - Element is the parent element's nth child.

Element, class, and ID selectors

Descendant Selector

Pseudo-class selector

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.