In CSS, a selector is the name given to a group of elements on an HTML document that the CSS is able to read and style accordingly. In other words, it is what is going to be styled. We essentially select certain elements to be styled. Each selector has a block of declarations that are encased in curly braces ({…}). This page will teach the basics of selectors and how to use them while showing you three of the eight types of selectors.

Selector Syntax

The purpose of the selector is to tell the parser what exactly to style. You do this with the following syntax:

selector{
    property: value;
    property: value;
}

Let us say that we want all <h1> headings to have a red color. In this case, I need to select the <h1> headings with the appropriate selector. This would look as follows:

h1{
    color: red;
}

The selector is simply the h1 before the opening curly brace. The style that applies to what the selector indicates (the <h1> headings in this case) is between the braces.

Types of Selectors

There are eight different types of selectors that each will look a different way and do different things. The amount of types of selectors creates a remarkable flexibility in the CSS world and allows for web developers to more easily create themes that are advanced. Here we will detail the three primary selectors that are used the most often in the CSS world.

Type

A type selector modifies HTML tags directly. All HTML tags in an HTML document¹ can be modified via the type selector. Let us say that we want all of our bold texts to be extra emphasized by changing its color to blue. In Wikidot, bold words are indicated with the following syntax:

The text in the **stars** is bold.

When Wikidot reads this, it transposes it into the following HTML:

<p>The text in the <strong>stars</strong> is bold.</p>

So to affect all bold characters, we need to select the <strong> tags. How do we do that in CSS?

We can use the type selector! The type selector for an HTML tag simply looks like the name of the tag without any special characters. The selector we want to use therefore would simply be strong. The CSS we would use would be below:

strong{    color: blue; }

You want to select all links instead? No problem, simply use the a selector!

a{    color: blue; }
/*Or you could select both*/
a,strong{    color: blue; }

Type selectors are extremely useful in styling all of a particular tag located in a block or the entire document. A reference for type selectors can be found here.

ID

The id selector is meant to select a single element for styling. HTML tags can be assigned an id, or unique name not given to any other element. For instance, I can name a certain <div> block with an id as follows:

<div id="breakfast">
contents...
</div>

In Wikidot, you cannot do this since it is automatically done. Since id names are unique, only one element gets styled when selected.

Wikidot comes with an entire set of ids that can be styled. Since Wikidot forms its own page structure, all that you need to do is modify the already placed elements. Every component on this page, for instance, has a particular id assigned to it. The side bar has an id of "side-bar", and the top bar has an id of "top-bar". The title of this page is called the "page-title" as well. So as you can see, the names are relatively intuitive for certain elements, and the page structure page will give you a near-complete list of the major ids used.

But how do we select them? Id selectors do not have the same exact syntax as the type selector. When you define what id you want, you put a # in front of it. For instance, let's say I want to select that div block with the "breakfast" id and make it have a border. I would use this:

#breakfast{    border: 1px solid red; }

The declarations are still encased in curly braces; the only true difference is that we put a # in front of the id name. This statement will therefore style only the particular element with the "breakfast" id.

In Wikidot, you can only use the id's already present. So if I wanted to change the color of the page title, I could do it like this:

#page-title{
    color: red;
}

These are easily the most important selectors in modifying Wikidot CSS, so it is important to memorize the main ids that Wikidot uses. A reference is found here.

Class

The class selector selects only the elements on a page that have been designated with a certain class name. This is similar to the ids given to elements (detailed above) except that more than one element may have a particular class. Furthermore, more than one class can be given to an element. You can assign a class to a particular element as follows in HTML:

<div>
<p>You might <span class="lunch">notice</span> how I can assign a <span class="lunch">class name</span> to more than one element which is different from ids.</p>
</div>

You are able to assign classes in Wikidot as well. The syntax is extremely similar:

[[div class="lunch"]]
contents...
[[/div]]

Therefore, when you use a class selector, it will style all of the elements with the specific class. The syntax for this is slightly different from id selectors. Instead of putting a # in front of the name, you need to use a period (.). So the class selector for the class "lunch" would be .lunch. In order to style those elements above with the "lunch" class, I would use this:

.lunch{
    text-decoration: underline;
    color: red;
}

The result is below:

This becomes extremely useful since you are able to define classes yourself. Wikidot also comes with its own set of classes which are detailed in the Class Reference.

In Practice