MooTools 1.2 Beginner's Guide
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

MooTools and CSS selectors

MooTools selects an element (or a set of elements) in the DOM using CSS selectors syntax.

Just a quick refresher on CSS terminology; a CSS style rule consists of:

selector {
property: property value;
}
  • selector—indicates what elements will be affected by the style rule
  • property—refers to the CSS property (also referred to as attribute). For example, color is a CSS property, so is font-style. You can have multiple property declarations in one style rule.
  • property value—the value you want assigned to the property. For example, bold is a possible CSS property value of the font-weight CSS property.

For example, if you wanted to select a paragraph element with an ID of awesomeParagraph to give it a red color (in hexadecimal, this is #ff0), in CSS syntax you'd write:

#awesomeParagraph {
color: #ff0;
}

Also, if I wanted to increase its specificity and make sure that only paragraph elements having an ID of awesomeParagraph are selected:

p#awesomeParagraph {
color: #ff0;
}

You'll be happy to know that this same syntax ports over to MooTools. What's more is that you'll be able to take advantage of all of CSS3's more complex selection syntax because even though CSS3 isn't supported by all browsers yet, MooTools supports them already. So you don't have to learn another syntax for writing selectors; you can use your existing knowledge of CSS. Awesome, isn't it?

上一章目录下一章