- A Short History of Style for the Web
- What Is CSS?
- How Is CSS Used?
- Basic CSS Syntax
- The Basics of Selectors
- Basic Properties: Font Styles
- Inheritance
- Getting Specific: class and id Selectors
- Common Text Layout Properties
- Combinators: Descendant and Child Selectors
- Common Background Properties
- Dynamic Selectors
- Basic Page Layout
- Advanced Page Layout
- Positioning
- Advanced Selectors
- Display Types
- More Properties
- Media Types
- Importing Style Sheets
- Quality Assurance
- Specific Challenges and Techniques
This chapter is from the book
This chapter is from the book
This chapter is from the book
Advanced Selectors
CSS2 and CSS3 provide a number of more advanced selectors that give even finer control over the elements we select on a page with them. In Chapter 12, we'll look in detail at some of the CSS3 selectors, but here, we'll quickly touch on three very useful kinds of selectors.
Adjacent Sibling Selectors
Sibling elements are those elements that share the same parent element in the document structure. CSS2 introduced the ability to select two elements that are adjacent to one another. The form of the selector is selector 1 + selector 2 (for example li+li), and they select an element that matches the second selector that is directly after an element that matches the first selector in the HTML document. They aren't commonly used but can come in very handy. This type of selector is supported in all contemporary browsers, including IE 7 and onwards, so it needs to be used with care where users of IE 6 are concerned.
Attribute Selectors
The attribute selector was introduced in CSS2 and considerably extended in CSS3. It enables us to select elements based on the value of their attributes.
With CSS2 we can select elements in three different ways:
- selector[attribute name] (for example, img[alt]) selects an element matching the selector that also has the named attribute set to any value.
- selector[attribute name=value] (for example, img[alt=photo]) selects an element matching the selector that also has the named attribute set to exactly the specified value. So img[alt=photo] selects <img alt="photo"> but not <img alt="photo of a flower">.
- selector[attribute name~=value] (for example, p[class~=introduction]) selects an element matching the selector that also has one of the space-separated values of the named attribute set to the specified value. This is useful for attributes like class that can take multiple values separated by spaces.
Note that we don't put quotation marks around either the attribute name or value.
CSS3 adds several new attribute selectors, including the ability to match substrings in attribute values. For example, we could select a link with the final four characters ".pdf", or the first seven characters "http://". It's also possible to select based on a substring value anywhere in an attribute value; for example, if we wanted to style the links to a particular subdirectory, say "contact" distinctly, we could do that as well.
- selector[attribute name^=value] (for example, a[href^=http://]) styles any element that matches the selector that also has the named attribute value starting with the specified value. a[href^=http://] selects any link with an absolute link, which could be used to style links away from the current site differently from those internal to the site (provided you use relative links internally, of course).
- selector[attribute name$=value] (for example, a[href$=.pdf]) styles any element that matches the selector that also has the named attribute value finishing with the given value. So a[href$=.pdf] selects any anchor that links to a file with the extension .pdf, which could enable us to let users know when they are going to download a PDF.
- selector[attribute name*=value] (for example a[href^=/contact/]) styles any element that matches the selector where the named attribute value also includes the given value.
These selectors are supported in all contemporary browsers other than Internet Explorer (including IE 8). As such, they need to be used with the consequences in mind of what happens when they aren't supported. We address this issue in detail in Chapter 12.
The Universal Selector
The universal selector (*) selects every element in a document. For example, this statement:
* {
margin:0
}
|
removes the default margin from every element in the document (we look at default CSS properties in detail in Chapter 8). However, by itself the selector is not recommended, as it can have a significant impact on performance and is usually more heavy handed than required. It's more likely to be used in combination with other selectors, and we'll see it used a number of times in the book. It also played an important role in a hack that hides CSS from some versions of Internet Explorer; see Chapter 7 for more on this and other common hacks.