Section A.1. #1 More Selectors

A.1. #1 More Selectors While you've already learned the most common selectors , here are a few more you might want to know about... A.1.1. Pseudo-elements You know all about pseudo-classes, and pseudo-elements are similar. Pseudoelements can be used to select parts of an element that you can't conveniently wrap in a <div> or a <span> or select in other ways. For example, the first-letter pseudo-element can be used to select the first letter of the text in a block element, allowing you to create effects like initial caps and drop caps. There's one other pseudo-element called first-line, which you can use to select the first line of a paragraph. Here's how you'd use both to select the first letter and line of a <p> element: p:first-letterPseudo-elements use the same syntax as pseudo-classes.{ font-size: 3em; } p:first-lineHere we're making the first letter of the paragraph large, and the first line italics.{ font-style: italic; } A.1.2. Attribute selectors Attribute selectors are not currently well supported in current browsers; however, they could be more widely supported in the future. Attribute selectors are exactly what they sound like: selectors that allow you to select elements based on attribute values. You use them like this: img[width] { border: black thin solid; }This selector selects all images that have a width attribute in their XHTML. img[height="300"] { border: red thin solid; }This selector selects all images that have a height attribute with a value of 300. image[alt~="flowers"] { border: #ccc thin solid; }This selector selects all images that have an alt attribute that includes the word "flowers". A.1.3. Selecting by Siblings You can also select elements based on their preceding sibling. For example, say you want to select only paragraphs that have an <h1> element preceding them, then you'd use this selector: h1+p { Write the preceding element, a "+" sign, and then the sibling element. font-style: italic; This selector selects all paragraphs that come immediately after an <h1> element. } A.1.4. Combining Selectors You've already seen examples of how selectors can be combined in this book. For instance, you can take a class selector and use it as part of a descendant selector, like this: .blueberry p { color: purple; } Here we're selecting all paragraphs that are descendants of an element in the blueberry class. There's a pattern here that you can use to construct quite complex selectors. Let's step through how this pattern works: Start by defining the context for the element you want to select, like this: div#greentea > blockquote Here we're using a descendant selector where a <div> with an id "greentea" must be the parent of the <blockquote>. Then supply the element you want to select: div#greentea > blockquote context p element Next we add the <p> element as the element we want to select in the context of the <blockquote>. The <p> element must be a descendant of <blockquote>, which must be a child of a <div> with an id of "greentea". Then specify any pseudo-classes or pseudo-elements: div#greentea > blockquote context p element:first-line Then we add a pseudo-element, first-line, to select only the first line of the paragraph. { font-style: italic; } That's a quite complex selector! Feel free to construct your own selectors using this same method.