Rules & Selectors

Structure of CSS rules

CSS informs the browser how to render the page. It consists of rules, which are grouped into a stylesheet. Each rule consists of a selector and a declaration block. The selector specifies which elements the rule applies to, and the declaration block contains the styling properties and their values.

p {
  background-color: lavender;
  padding: 10px;
}

p a {
  color: deeppink;
  text-decoration: line-through;
}

p span {
  text-transform: uppercase;
}

<span>Some span</span>
<p>Paragraph with a <a href="#">link</a> and a <span>span</span>.</p>

Classes and IDs

Attributing and selecting classes

You can group and select elements beyond their tags by utilising the class attribute. You can attribute multiple classes to an element by seperating them with a space.

<div class="project-wrapper background-gradient">
  <p class="no-margin">Project with a gradient.</p>
</div>
<div class="project-wrapper active">
  <p class="no-margin">Active project</p>
</div>
          

To select a class, preceed the class name with a period. To be more specific, you can concatenate the tag name with one or more classes.

div.project-wrapper {
  border-radius: 8px;
  padding: 16px;
  background-color: lavender;
}

.background-gradient {
  background-image: linear-gradient(to right, lavender, skyblue);
}

div.project-wrapper.active {
  border: solid 1px deeppink;
}

.no-margin {
  margin: 0;
}
              

Attributing and selecting IDs

IDs work similarly to classes, but they by definition are unique. You cannot repeat an ID more than once per page! They are used to select a single element.

<nav id="main-nav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

#main-nav a {color: deeppink}

useful pseudo-classes

Pseudo-classes are used to select elements based on their state and general context.

Hover

You can use the :hover pseudo-class to select elements when the mouse is over them.

<div>Hover me</div>
<div>Hover me</div>
<div>Hover me</div>

div {
  transition-property: background-color, transform;
  transition-duration: 100ms;
  transition-timing-function: ease-in-out;
  background-color: lightgreen;
  transform: scale(1);
}

div:hover {
  background-color: deeppink;
  transform: scale(0.95);
}

First and last child

You can use the :first-child and :last-child pseudo-classes to select the first or last child of an element.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

li {
  background-color: lightgreen;
}

li:first-child {
  background-color: deeppink;
}

li:last-child {
  background-color: orange;
}

Common combinators and separators

Increase specificity

You can combine selectors to increase the specificity of a selector. To to so, simply append another selector to the first one. For example, you can select all the paragraphs with the .running-text class like so:

p.running-text {text-indent: 2ch}

Select more than on element

You can select any HTML element by its tags name. To selector more than one element, you can combine selctors with a comma.

/* Selects all elements with the tag name p, a, or span 
and sets the text color to deeppink */
p, a, span {color: deeppink}

<h3>Not <a href="#">selected</a></h3>
<p>Aliqua qui dolore do elit pariatur do ea et ipsum.</p>
<a href="#">Lonesome link</a>
<span>Span 01</span>
<span>Span 02</span>

Select descendants

You can select the descendants of an element by seperating the tag names with a space. The descendants of an element are all the elements that are contained within it.

/* Selects all elements with the tag name p that are
descendants of an element with the tag name div */
div p {color: deeppink}

<p>This paragraph is not selected.</p>
<div>
  <p>This paragraph is selected.</p>
  <article>
    <p>This paragraph is also selected.</p>
  </article>
</div>

Select a child

Children are selected by using the > symbol. A child is the direct descendant of its parent.

<div id="reference">
  <div>
    <div></div>
  </div>
</div>

div {
  min-height: 16px;
  padding: 16px;
  background-color: lightgoldenrodyellow;
}

#reference {
  border: solid 1px blue;
}

#reference > div {
  background-color: deeppink;
}

Pseudo-elements

Pseudo-elements are used to change, add, or remove content that isn't declared in HTML, such as the list marker (except on Safari), the scrollbar (only on Safari), or the backdorp of a dialog.

The most common pseudo-elements are the ::before and ::after pseudo-elements. They can be used to add content to the beginning or end of an element, and can contain content (text or images). Here is an example adding an arrow after every link on the page that opens in a new tab:

<ul>
  <li><a href="#">Link opening in the same tab</a></li>
  <li><a href="#" target="_blank">Link opening in a new tab</a></li>
  <li><a href="#" target="_blank">Link opening in a new tab</a></li>
</ul>

a[target="_blank"]::after {
      content: " ↗";
      display: inline-block;
      margin-left: 0.25rem;
    }

Here is another example using the ::-webkit-scrollbar pseudo-element to remove the scrollbar on an scrollable element:

<div class="scroll-container">
  <p>Lorem ipsum…</p>
  <p>Lorem ipsum…</p>
  <p>Lorem ipsum…</p>
</div>

.scroll-container {
  height: 256px;
  overflow-y: scroll;

  /* Hides the scrollbar on most browsers */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Hides the scrollbar on Webkit browsers (Safari) */
.scroll-container::-webkit-scrollbar {
  display: none;
}