Compound Class Rules in CSS
Cascading Style Sheets can simplify Web design by separating design from structure on HTML pages. Knowing the differences between different CSS selectors can further simplify your style sheets and free up bandwidth. Class and compound selectors use CSS rules to format your page's content, and you can use them together to enhance your Web pages.
Other People Are Reading
-
CSS Selector Types
-
A CSS a selector applies style properties, such as color, positioning or font style, to an HTML element. There are many types of selectors, offering control of specific elements like form fields and bullets. You can use tag selectors to apply specific formatting to any text within specific HTML tags, or ID selectors to apply formatting to unique HTML <div> elements. Some selectors, such as class and tag selectors, can work together, while others like ID selectors override other selectors. In CSS version 2 and later, selectors can even include conditional statements.
Class Selectors
-
A CSS class selector uses a unique name that you insert into the HTML, and begins with the class name preceded by a period. For example, a class selector may look like this:
.myclass { font-size: 90%; font-weight: bold; }
The class is applied by adding the class name to each HTML element you wish to apply it to. For example, you could apply the above class to a paragraph:
<p class="myclass">This is text styled by this class.</p>
If the <p> tag is formatted using a tag selector, that formatting will also apply to the above paragraph.
-
Compound Selectors
-
A compound selector isn't a unique selector type; instead it refers to a combination of two or more selectors. Compound selectors combine common formatting such as the font used in all of a page's heading tags:
h1,h2,h3 { font-family:verdana,sans-serif }
You can then format elements such as font size as separate tag selectors.
A compound selector also enables you to style specific elements within other elements. For example, the following style would apply to any <b> tag within the class "myclass":
.myclass b {color: #333333;}
While the term "compound selector" is used by designers and in HTML editors like Adobe Dreamweaver, the W3C selectors specification doesn't refer to compound selectors, instead referring to "grouping" and "descendant selectors."
Compound Selector Rules
-
When you use a compound selector to group tags with common elements, always use a comma between each tag. When you use a compound selector to specify formatting in nested elements, include the broader element such as a class or ID first, and then the element to be nested inside it, such as a tag. You can use two tags, classes or two IDs, but remember that within your HTML the second must be contained inside the first for the compound selector to do its job.
-
References
Resources
- Photo Credit John Howard/Photodisc/Getty Images
