Selectutorial: CSS selectors. Selectutorial - CSS selectors Selectutorial - CSS selectors Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that they can be styled. Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses. There is also a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout. Rules The document tree - it's a family thing Selectors Advanced stuff Selectors in action - a step by step tutorial Max Design Feeds Recent articles Popular articles Other Max Design articles and presentations Associated with webstandardsgroup.org. Intermediate CSS Workshop. Your mission in this simple exercise is to match the two elements where I have put *** around the text - with one selector - and without affecting any other elements. Make those two elements red and boldfaced.
A second paragraph with *** some emphasized text. *** And a third paragraph with a link. List item one in second <div>.List item two.List item three. And this is more filler text - in a paragraph in the second <div> - with a *** link ***. The Markup Here's a look at the skeleton of that bit of markup above, assuming that it were an entire document. <body><h2></h2><div><p><em></em></p><p><em>***</em></p><p><a href=" href=" The Document Tree And here's the doctree image with the elements we want to match highlighted: The Solution Or A Solution. And it works! Remember that this is just one possible solution.
Selectors. 5.1 Pattern matching In CSS, pattern matching rules determine which style rules apply to elements in the document tree. These patterns, called selectors, may range from simple element names to rich contextual patterns. If all conditions in the pattern are true for a certain element, the selector matches the element. The case-sensitivity of document language element names in selectors depends on the document language. The following table summarizes CSS 2.1 selector syntax: 5.2 Selector syntax simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. Note: the terminology used here in CSS 2.1 is different from what is used in CSS3. Selector is a chain of one or more simple selectors separated by combinators. Combinators are: white space, ">", and "+". The elements of the document tree that match a selector are called subjects of the selector. 5.2.1 Grouping Example(s): is equivalent to: [att]
The Adjacent-Sibling Selector. Web Review July 2000 As previous articles in this series have shown, CSS has some interesting new selectors. Between the universal selector and the child selector, it's possible to construct selectors which would be next to impossible using traditional CSS1-style selectors. Well, we're continuing the trend in this installment. This time, though, we'll be talking about something which is almost literally impossible to do with contextual selectors. With the adjacent-sibling selector, you can apply styles to elements based on the elements which immediately precede them in the document. How It Works The syntax is straightforward enough: just two or more selectors separated by a plus (+) symbol.
The rule will apply to all paragraphs which immediately follow an H1 element, and which share the same parent. Let's look at this in a little more detail. One example of adjacent siblings is the EM and STRONG elements within the paragraph. We can make the paragraph gray with the following rule: Ta-da! The Child Selector. Web Review June 2000 In the second of five articles on the new selectors found in CSS2, we turn to the child selector.
This is used to match elements that are direct children of other elements, which is a little more precise than the traditional contextual selector. If you haven't read the article on the universal selector, though, you may want read it first, since the universal selector appears in some of the examples for this, and future, articles. How It Works Using the child selector is pretty easy. It's written using a greater-than symbol (>), and it must appear between two other selectors. This rule will make green any paragraph which is a direct child of the body element. How is this different from traditional contextual selectors? Selecting Precise Descendants By chaining child selectors together, it's possible to very precisely target certain elements at certain points in the document.
This will work on exactly those paragraphs described above, and no others. Children in Context. Universal Selector. Web Review June 2000 No, it isn't a new movie starring Jean-Claude Van Damme-- it's the first of the CSS2 selectors which I plan to cover in a series of articles. These include the child selector, sibling selectors, a trio of new pseudo-classes, and most complicated of all, the attribute selectors. I will examine each of these in turn, and in detail. Note that support for these CSS2 selectors is limited as I write this, but the near future promises a number of browsers that will expand support dramatically. It's a perfect time to start learning how these new selectors can make your CSS more sophisticated and less dependent on classes and other special-case markup. How It Works In many ways, the most powerful of the new CSS2 selectors is the universal selector.
This isn't the extent of the universal selector's power, of course, because it will match any element at all. Let's say that we want to apply a given style to all elements with a class of danger. So what's the big deal?