ButlerCC Webhosting

Most web developers learn CSS by first writing style rules that target the HTML elements on the page because. the element selector is easy to understand and the results are immediate and obvious. With a little CSS practice, grouped selectors become essential to reducing redundancy because they allow us to apply the same style properties to multiple elements separated with commas in a single style rule.

The disadvantage of using element and grouped selectors of course, is that they are universally applied. And it doesn't take long before the need to format one particular element arises. The simplest solution for most developers is to use class selectors and ID selectors to target specific elements. But unfortunately, the tendency is to overuse them and end up with pages that suffer from class-itis.

Instead of mucking around with the markup by adding classes and id's to elements simply for styling purposes, consider using advanced CSS selectors to apply formatting to target elements. The many advanced selectors are generally categorized into contextual selectors, attribute selectors, pseudo-element selectors, and pseudo-class selectors.

Element selectors

Element selectors apply properties globally to all specified elements on the page, and are the most common selectors used.

Class and ID selectors

Class and ID selectors make it easy to target and apply properties to one or several particular elements without affecting all the others. Classes allow you to classify elements into conceptual groups. Two or more elements can belong to the same class on a page. IDs assign a unique identifier to an element, and each id value must be used only once on a page.

Contextual selectors

Contextual selectors (combinators) target elements based on their relationships to other elements in the document's tree hierarchy, and use the same parent, child, sibling, and descendant terminology.

Related Links:

• The 30 CSS Selectors you Must Memorize
• Taming Advanced CSS Selectors

Pseudo-class selectors

Pseudo-class selectors are used to apply styles to elements based on their browser state or position in document hierarchy. Browsers keep track of many things behind the scenes, like whether a link has been visited, when an element is selected, and whether an element is the first or last of its type, or even the first or last child of its parent element.

All elements in a certain state are treated as though they belong to the same class, even though the class name is not actually in the markup. Pseudo-class selectors are indicated by a colon (:), and are typically placed immediately after the element name.

Pseudo-class selectors for link and user states

When styling all link states, the order of the rules in the style sheet is important for proper functionality. Required order is :link, :visited, :focus, :hover, :active.

Pseudo-class selectors that apply to siblings

The following six sibling pseudo-class selectors apply to elements that have the same parent, and are at the same level of the document hierarchy.

The :first-child, :last-child, and :only-child pseudo-classes are very specific. When a targeted element is no longer the first, last, or only child of its parent, the style rule no longer applies.

The other pseudo-classes are far more flexible. When you add or remove a targeted element, the browser will still automatically apply the style to the first and last element, or to the element that has no siblings of the same type.

Related Links:

• Meet the Pseudo Class Selectors
• Getting to Know CSS3 Selectors: Structural Pseudo-Classes
• Getting to know your CSS selectors Part 2: CSS3 pseudo-classes and pseudo-elements

CSS3 structural Pseudo-class selectors

The new CSS3 pseudo-class selectors can style elements based on their position within a series in the document hierarchy.

Use the following typical n values to target elements.

Related Links:

• Useful :nth-child Recipes
• How To Use CSS3 Pseudo-Classes
• Quick Tip: Work Backward to Understand Structural Pseudo Classes
• CSS3 Structural Pseudo-class Expressions Explained
• How To Use Structural Pseudo Classes and Pseudo Element Selectors

Pseudo-element selectors

Pseudo-element selectors allow you to style fictional elements that are not actually in the markup. The ::first-letter and ::first-line selectors target a portion of an element to avoid use of inline <span> element. The ::before and ::after selectors are used to insert content dynamically that doesn't exist in the markup.

CSS3 uses a double colon for pseudo-elements. To provide backward compatibility for older browsers, omit one of the colons that precede the pseudo-elements (ie :first-letter)

Common uses of generated content:

blockquote>p::before {
  content: "\201c"; /* left double quotation character */
  display: inline;
}
blockquote>p::after {
  content: "\201d"; /* right double quotation character */
  display: inline;
}

/*  apply class to  parent element to self-clear its floated children */
.group:after {
  content: ""; 
  display: table; 
  clear: both; 
}

Related Links:

• Learning To Use The :before And :after Pseudo-Elements In CSS
• To find Unicode Characters:
  • Unicode Character Table
  • XHTML Character Entity Reference - Hover over a character box to display the characters numerical code (&#8220;) and its Unicode code (u201c).
    NOTE: For generated content with ::before and/or ::after pseudo-elements, use only the hexadecimal part--the part after the "u"--and be sure to escape the code by preceding with a backslash "\" character.
• How To Benefit From CSS Generated Content And Counters
• How To Create a Stylish Drop Cap Effect with CSS3
• CSS Fundamentals: Containing Children

Attribute selectors

Attribute selectors target elements based on the presence or value of a specific attribute. Of the seven attribute selectors in the table below, the last three are new in CSS3, and are not yet fully supported by all browsers.

Related Links:

• Quick Tip: Make the Most of CSS Attribute Selectors
• Getting to know your CSS selectors Part 1: CSS2.1 and attribute selectors
• The Skinny on CSS Attribute Selectors