完全なリファレンスガイド🚀

A CSS selector is a pattern used to choose the HTML elements that we want to style.

Speaking more technically, CSS selectors are able to select those HTML elements to which a style ruleset will be applied.

Syntax: * { style properties }

This selector is represented by an asterisk (*) and matches all the elements in the HTML document.

<ul>
  <li>Computer Science Eng.</li>
  <li>Mathematics</li>
  <li>Physics</li>
</ul>

* {
  border: 1px solid coral;
}

This will apply a 1px solid coral border to all elements in the document.

Syntax: elemType { style properties }

This selector matches all elements that belong to the specified type.

<p>A paragraph</p>
<p>Another paragraph</p>
<p>One more paragraph</p>

p {
  font-size: 1.5rem;
  color: deeppink;
}

This will apply a font size of 1.5rem and a deep pink color to all <p> elements. Easy and direct.

Syntax: .classname { style properties }

This selector is represented by a period (.) and matches all elements that contain the specified class.

<div>
  <p class="deeppink">This is a deep pink paragraph</p>
  <p class="hotpink">This is a hot pink paragraph</p>
  <p class="pink">This is a regular pink paragraph</p>
  <p class="deeppink-bg">This is a paragraph with a deep pink background</p>
  <p class="hotpink-bg">This is a paragraph with a hot pink background</p>
  <p class="pink-bg">This is a paragraph with a regular pink background</p>
</div>

.deeppink {
  color: deeppink;
}
.hotpink {
  color: hotpink;
}
.pink {
  color: pink;
}
.deeppink-bg {
  background-color: deeppink;
}
.hotpink-bg {
  background-color: hotpink;
}
.pink-bg {
  background-color: pink;
}

/* Group selector - Stay until the end to understand its
 behavior 😉 */
.deeppink-bg, .hotpink-bg, .pink-bg {
  color: white;
}

This will apply a different pink color variant to every <p> element depending on the class they contain, styling either their text or their background.

Output:

Syntax: #idname { style properties }

This selector is represented by a hash symbol (#) and matches the unique element that contains the specified id.

<div>
  <table id="users-table">
    <th>Users</th>
    <tr>
      <td>John Doe</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
    </tr>
  </table>
  <table id="staff-table">
    <th>Staff</th>
    <tr>
      <td>Hannah Legend</td>
    </tr>
    <tr>
      <td>Daniel Oaks</td>
    </tr>
  </table>
</div>

/* Type selector */
table {
  padding: 20px;
}
/* ID selectors */
#users-table {
  background-color: black;
  color: white;
}
#staff-table {
  border: 1px solid black;
}

This will apply a black background color and a white text color to the table that matches the id users-table, and a 1px solid black border to the table that matches the id staff-table. Both of them receive a padding of 20px based on their type.

Output:

The attribute selector is more complex than the rest of the selectors and has several syntaxes that can be applied to our HTML elements based on which condition should be satisfied by them.

In other words, it matches all the HTML elements which contain a specified attribute and whose value for that attribute satisfies a given condition.

Grouping selectors in CSS is basically used to put together those elements of different type or with different id/classes that we want to apply the same style properties to.

Additionally, by using this technique, we'll get rid of redundancy and our code will be clean, concise and organized.

Syntax: elem1, ..., elemN { style properties }

This selector is represented by a comma (,) and matches all the elements stated in the list and applies the same ruleset to all of them.

<h1>Computer Science Engineering</h1>
<h2>List of courses</h2>
<ul>
  <li>Algebra</li>
  <li>Calculus</li>
  <li>Physics</li>
  <li>Discrete Mathematics</li>
  <li>Introduction to Programming</li>
</ul>

h1, h2, li {
  color: darkred;
}

This will apply a dark red color to every <h1> , <h2> and <li> element.

CSS selectors can also be combined. By combining selectors, then we can define CSS combinators.

CSS combinators are used to establish a relationship between different selectors and are very useful to make your element selection more targeted.

Syntax: elem1 elem2 { style properties }

This combinator is represented by a single space ( ) and matches all elem2 that are descendants of elem1.

Consider the following navigation:

<nav>
  <ul>
    <li><a>Home</a></li>
    <li>
      <a>People</a>
      <ul>
        <li><a>Students</a></li>
        <li>
          <a>Faculty members</a>
          <ul>
            <a>Discrete Mathematics</a>
            <a>Programming</a>
            <a>Physics</a>
            <a>Algorithms</a>
          </ul>
        </li>
        <li><a>Staff members</a></li>
      </ul>
    </li>
    <li><a>About</a></li>
    <li><a>Contact</a></li>
  </ul>
</nav>

nav a {
  border: 1px solid crimson;
  color: darkslateblue;
  font-size: 1.5rem;
  font-weight: bold;
}

This will apply a 1px solid crimson border, a dark slate blue color, a font size of 1.5rem and a bold font weight to every <a> element that is descendant of a <nav> element, regardless of how nested they are.

Output:

Syntax: elem1 > elem2 { style properties }

This combinator is represented by a prompt (>) and matches all elem2 that are direct children of elem1.

<div class="box">
  <p>This is a direct child of .box</p>
  <div>
    <p>This is not a direct child of .box</p>
  </div>
  <p>This is another direct child of .box</p>
</div>

.box > p {
  color: darkgoldenrod;
}

This will apply a dark golden color to every <p> element that is a direct child of any element that has the class box, so, in this HTML example, the first and last <p> elements will be selected, but not the one in the middle.

Output:

Syntax: elem1 ~ elem2 { style properties }

This combinator is represented by a tilde (~) and matches all elem2 that are siblings to elem1 and come after it.

<img src="blue-mug.jpeg" alt="a regular blue coffee mug" />
<p>Blue mug</p>
<p>Price: $15</p>

img ~ p {
  color: darkblue;
}

This will apply a dark blue color to every <p> element which is a sibling of any <img> element and comes after it. In this example, both <p> elements will be selected.

Syntax: elem1 + elem2 { style properties }

This combinator is represented by a plus symbol (+) and matches all elem2 that are siblings to elem1 and appear immediately after it.

<img src="blue-mug.jpeg" alt="a regular blue coffee mug" />
<p>Blue mug</p>
<p>Price: $15</p>

img + p {
  color: darkblue;
}

In this case, only the first <p> element will be selected, since the second one doesn't appear immediately after the <img> element.

A CSS pseudo-class is a keyword that is added to a selector and defines a special state of the selected elements.

Syntax: elem:pseudo-class { style properties }

This selector is represented by a colon (:).

<h1>Shopping list</h1>
<ul>
  <li>Milk</li>
  <li>Butter</li>
  <li>Eggs</li>
  <li>Sugar</li>
</ul>

li:hover {
  background-color: black;
  color: white;
}

In this example, we're applying a black background color and a white text color to every <li> element when the cursor hovers over it.

Take a look at what happens when we hover over the Butter element:

A CSS pseudo-element is a keyword that is added to a selector to style a specific part of the selected elements.

Syntax: elem:pseudo-element { style properties }

This selector is represented by a double colon (::).

<p>CODE</p>

p::before{
  content: "_";
}

In this example, we're appending an underscore symbol in front of every <p> element.