Class selectors

In some cases, you may wish to modify an element or a group of elements. For instance, you may wish for your general website text to be blue, as in the examples so far, but some portions of it to be red. The simplest way of doing this is by using a class selector. In CSS, a class selector’s name is prefixed by a period (.), like this:
.warningText {
color: red;
}
This style is applied to HTML elements in any web page the style sheet is attached to using
the class attribute, as follows:

This heading is red.

This text is red.

This is a paragraph, and this text is å red.

You don’t have to lay out CSS rules as done in this section; rather, you can add rules as one long string. However, the formatting shown here is more readable in print. Note that in the files available for download, the formatting is changed slightly again: the property/value pairs and closing curly bracket are both tabbed inward, enabling rapid vertical scanning of a CSS document’s selectors.

If you want a make a class specific to a certain element, place the relevant HTML tag before the period in the CSS rule:
p.warningText {
color: red;
}
If you used this CSS rule with the HTML elements shown previously, the paragraph’s text would remain red, but not the heading or span, due to the warningText class now being exclusively tied to the paragraph selector only. Usefully, it’s possible to style an element by using multiple class values. This is done by listing multiple values in the class attribute, separated by spaces:

The previous example’s content would be styled as per the rules .warningText and .hugeText.

ID selectors

ID selectors can be used only once on each web page. In HTML, you apply a unique identifier
to an HTML element with the id attribute:

To style this element in CSS, precede the ID name with a hash mark (#):
p#footer {
padding: 20px;
}
In this case, the footer div would have 20 pixels of padding on all sides. Essentially, then, classes can be used multiple times on a web page, but IDs cannot. Typically, IDs are used to define one-off page elements, such as structural divisions, whereas classes are used to define the style for multiple items. Grouped selectors Should you wish to set a property value for a number of different selectors, you can use grouped selectors, which take the form of a comma-separated list:
h1, h2, h3, h4, h5, h6 {
color: green;
}
In the preceding example, all the website’s headings have been set to be green. Note that you’re not restricted to a single rule for each element—you can use grouped selectors for common definitions and separate ones for specific property values, as follows:

h1, h2, h3, h4, h5, h6 {
color: green;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}

If you define a property value twice, browsers render your web element depending on
each rule’s position in the cascade. See the section “The cascade” later in the chapter
for more information.

Contextual selectors

This selector type is handy when working with advanced CSS. As the name suggests, contextual selectors define property values for HTML elements depending on context. Take, for instance, the following example:

I am a paragraph.

So am I.

You can style the page’s paragraphs as a whole and then define some specific values for those within the navigation div by using a standard element selector for the former and a contextual selector for the latter:
p {
color: black;
}
#navigation p {
color: blue;
font-weight: bold;
}
As shown, syntax for contextual selectors (#navigation p) is simple—you just separate the individual selectors with some whitespace. The two rules shown previously have the following result:
The p rule colors the web page’s paragraphs black. The #navigation p rule overrides the p rule for paragraphs within the navigation div, coloring them blue and making them bold.By working with contextual selectors, it’s possible to get very specific with regard to styling things on your website; we’ll be using these selectors regularly.

There are other types of selectors used for specific tasks. These will be covered as relevant
later in this Blog.

Related posts:

1. Creating alternatives with classes and spans It’s common in web design to define alternatives to the...
2. Using Cascade Order CSS allows you to assign the same rule to the...
3. The rules of CSS Style sheets consist of a number of rules that define...

Related posts brought to you by Yet Another Related Posts Plugin.