Advertisement
Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

CSS3 Selectors

Part of the CSS3 For Dummies Cheat Sheet

CSS3 provides access to a wide variety of selectors that you use to identify which element to format on a page. A selector defines what to format; the style defines how to format it. However, it’s easy to go into selector overload. Most developers use a combination of tag and attribute selectors to perform all selector-related tasks. Here are the commonly used tag selectors, which provide overall selection methodologies.

  • Tag,Tag: Separating two tags with a comma means selecting both tags, regardless of where they appear in the document. For example, using p,div would select all <p> and <div> tags within the document.

  • Tag>Tag: Separating two tags with a greater than sign (>) tells the browser to select a tag that has another tag as a parent. For example, if you have <div><p /></div> and use div>p, the browser will select the <p> tag.

  • Tag Tag: Separating two tags by a space tells the browser to select a tag that appears within another tag. This selector differs from using a greater than sign in that the first tag need not directly appear immediately before the second tag. For example, if you have <div><span><p /></span></div> and use div>p, the browser won’t select anything. However, if you use div p instead, the browser will select the <p> tag.

  • Tag+Tag: Separating two tags with a plus sign (+) tells the browser to select a tag that appears immediately after another tag. For example, if you have <div /><p /> and use div+p, the browser will select the <p> tag. Notice that the <p> tag doesn’t appear within the <div> tag, it appears after the <div> tag.

  • Tag~Tag: Separating two tags with a tilde (~) tells the browser to select every tag that appears after another tag. For example, if you have <div /><p /><p /> and use div~p, the browser will select both <p> tags. This differs from div+p (where the browser will select only the first <p> tag that follows the <div> tag).

  • :root: Selects the root element of the document. The root element depends on the document type. This selector is normally used with XML documents, but you could potentially use it with any document type.

In order to provide fine selection of just the right elements, developers often use attribute selectors in place of tag selectors. Here are the attribute selectors that developers commonly use.

  • .ClassName: Selects any objects that have a class attribute value with the given name. For example, .StdPara would select every object that has a class="StdPara" attribute without regard for object type.

  • #Id: Selects any objects that have an id attribute value with the given name. For example, #ThirdHeader would select every object that has an id="ThirdHeader" attribute without regard for object type.

  • :lang(Language Identifier): Selects any object with the specified language value. For example, :lang(en) would select any object that uses English as its language. Here is a list of common language identifiers.

  • [Attribute]: Selects all objects that use a particular attribute regardless of the attribute’s value. For example, [lang] would select all objects that use the lang attribute.

  • [Attribute=Value]: Selects all objects that have an attribute with a particular value. The value must match precisely. For example, [lang="en-us"] would select every object that has a language attribute with a value of English.

  • [Attribute~=Value]: Selects all objects that have an attribute that contains a particular value. The search value need only appear somewhere within value as a whole. For example, [title~="Secondary"] selects all objects with title attributes that contain the word Secondary as a discrete word. This selector works with whole words.

  • [Attribute|=Value]: Selects all objects that have an attribute that begins with a particular value. The search value needs to appear at the beginning of the value as a whole, but need not be the entire value. For example, [title|="Sub"] selects all objects with title attributes that start with the word Sub. This selector works with hyphenated terms.

  • [Attribute^=Value]: Selects all objects that have an attribute that begins with a particular value. For example, [title|="Sub"] selects all objects with title attributes that start with the word Sub. This form of the selector is less restrictive than the [Attribute|=Value] attribute. Using this form will select title="SubHeader", title="Sub Header", or title="Sub-Header" with equal reliability.

  • [Attribute$=Value]: Selects all objects that have an attribute that ends with a particular value. For example, [title$="Secondary"] selects all objects with title attributes that end with the word Secondary. This form of the attribute is nonrestrictive — it requires no special formatting.

  • [Attribute*=Value]: Selects all objects that have an attribute that contains a particular value. For example, [title$="Secondary"] selects all objects with title attributes that contain with the word Secondary. This form of the selector is less restrictive than the [Attribute~=Value] attribute. Using this form will select title="SecondaryParagraph", title="Secondary Paragraph", or title="Secondary-Paragraph" with equal reliability.

A special not() selector completes the common array of selectors. To tell the browser not to select a particular tag or attribute, but to select everything else instead, you use the :not() selector. For example, :not(p) would select everything but the paragraph tags on the page.

blog comments powered by Disqus
Advertisement
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win an iPad Mini. Enter to win now!