What is the selector??
CSS selectors are the heart and soul of CSS. They define which HTML elements you are going to be manipulating with CSS code.
- SELECTOR { PROPERTY: VALUE }
"Property" is the CSS element you wish to manipulate and "VALUE" represents the value of the specified property.
The selector name creates a direct relationship with the HTML tag you want to edit. If you wanted to change the way a paragraph tag behaved, the CSS code would look like:
- p { PROPERTY: VALUE }
The above example is a template that you can use whenever you are manipulating the paragraph HTML element.
The first part of a style, the selector, indicates the element or elements of a page to format. In this case, h1 stands for "every heading 1, or <h1>, tag on this page."
Class selectors While type selectors target every instance of an element, class selectors can be used to select any HTML element that has a class attribute, regardless of their position in the document tree. For example
<body>
<p class="big">This is some <em>text</em></p><p>This is some text</p>
<ul>
<li class="big">List item</li>
<li>List item</li>
<li>List <em>item</em></li>
</ul>
</body>
CSS: Group Selectors
So this:
div#main {border:1px solid red;}
div#sidebar {border:1px solid red;}Becomes this:
dive#main, div#sidebar {
border:1px solid red;
}You can combine grouped selectors with contextual and other selectors to create powerful yet compact rules for your style sheets. The body id/class method used to highlight current tabs is one example of this technique.
This abbreviated form of specifying style is supported by most modern browsers. You can combine grouping of selectors with grouping of declarations to create even more powerful CSS rules. We'll cover grouping of declarations in an upcoming tweak.
No comments:
Post a Comment