/css-cheat-sheet

CSS Cheat Sheet

Simple Cheats

Selectors

ID selectors

Id (aka ID or Identifier) selectors are used to style an element with an id attribute like so.

Make note of the id attribute and the # at the start of the selector

<h1 id=”main-title”>Test</h1>
#main-title {
  color: red
}

Class selectors

Class selectors are multi-string values that can apply to one or more class of styles. A basic set of classes could look like this

<div class="container">
  <div class="box">
  </div>
  <div class="box is-red">
  </div>
</div>
.container {
  margin-left: 2em;
  margin-right: 2em;
}

.box {
  background-color: blue;
  height: 200px;
  width: 100px;
}

.box.is-red {
  background-color: red;
}

Make note of the above chain example .box.is-red this only applies to an element with both box and is-red classes in the class attribute like so class="box is-red"

Elements selectors

html elements can be selected using css. This is done by writing the element name before your style block

<ul>
  <li>First List Item</li>
</ul>
ul {
  margin: 0;
  list-style-type: none;
}

li {
  color: red;
}

In this example, all li elements will now have red text and all ul elements will have no margin and no bullet points

Universal Selector

There is a way to select everything on a page (or in some cases decendants/children - I'll show this later)

<div>
  <ul>
    <li>
      First List Item
    </li>
  </ul>
</div>
* {
  padding: 20px;
}

The above * applies to all elements in the example. Everything will have a padding of 20px!

Special Selectors

Attribute selectors

We can target elements but using their attributes values as conditions. For example

<input name="first-name" type="text" placeholder="Enter your First Name"/>
<input name="email" type="email" placeholder="Please enter your Email Address"/>
input[type="email"] {
  background: blue;
}

The above example will result in only the the email input field having a blue background

Advanced attribute selection

A more advanced method is to use the regex selectors (I think that's what they're called?) to select certain parts of the attribute value

Syntax What's it for? Example
^= attribute must starts with a[href^="https"]
$= attribute must end with a[href$=".jpg"]
*= attribute must container anywhere in string a[href*=".com"]

Child selectors

Child selectors are targeted from their parent downwards. Like so .parent .child .child-of-child. This selector will target a child-of-child class within a child class that is also in a parent class.

<div class="parent">
  <h1>Parent</h1>
  <div class="child">
    <h1>Child</h1>
    <div class="child-of-child">
      <h1>Child Of Child</h1>
    </div>
  </div>
</div>
.parent .child .child-of-child {
  color: red;
}

The above will result in only the text "Child of Child" being red.

Descendants

You can select children within an elements using >. This works like so

<div class="header">
  <div class="box">
    <h1>Box in header</h1>
  </div>
  <div class="container">
    <div class="box">
      <h1>Box in container in header</h1>
    </div>
  </div>
</div>
.header > .box h1 {
  color: red;
}

In this example, only the first h1 in box will have red text. This is because the box class .box is a direct decendant (child) of .header specificed in the css with .header > .box