Class Selectors

A class selector is used to select a class of elements. Sometimes, you may want a certain portion of the page to have a particular set of definitions. Perhaps you want a particular <p> tags to have a pink background, but the normal <p> tag shouldn't. For this, you can use a class.

In the HTML, a class is called in the tag like so:

<p class="pinkback">This will have a pink background.</p>

The class="pinkback" will refer back to the CSS to find out how the paragraph should look. In the CSS, a class is defined with a period followed by the class name. So, let us say that in the CSS, we want the class pinkback to define a pink background. Simply,

.pinkback{
    background-color: pink;
}

Notice that we defined .pinkback with that period, otherwise the parser reads a type selector.

Now, we can summon the class for any tag of HTML. For example, this <div> block defines the class pinkback.

Likewise, you can call the class from practically any tag, so even a <span> tag can have the class.

In Wikidot, the tags even though they look different (the <div> looks like [[div]]), you can still call the class. In fact, you do so in the exact same way:

[[div class="pinkback"]]
This paragraph has a pink background.
[[/div]]
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License