SubscribeFeb 2 CSS Selectors
Selectors
A Selector is the definition of a formatting Style that can be applied to a HTML Element. The Selector has three basic parts:
Element {Declaration: Value}
The Declaration and Value are surrounded by {} braces and the Declaration is separated from the value by a colon : and a space.
The Selectors relation to common HTML would be similar to this tag structure that is used to define the color of a font:
< font color=orange >
Where Font is the Element, Color is the Declaration and Orange is the Value of the Declaration.
Type Selectors
Type selectors are used set the definition of a certain type of element. If you wanted to assign a property to all of the <H1> elements in your document you would use the following.
<style>
H1 {color: 000fff}
</style>
The syntax is:
Element {declaration: value }
Multiple Declarations
If you would like to define more than property for your Element you can use a semicolon ; to separate Declarations.
<style>
H1 {color: 000fff ;
font-weight: bold;
font-size: 12pt
}
</style>
The syntax is:
Element {declaration: value ; declaration: value}
Grouping Elements
If you would like to apply the same properties to different elements you can use a coma , between the elements and use the same Declarations and Values.
<style>
H1, TD, P {color: 000fff }
</style>The syntax is:
Element, Element, Element {declaration: value }
Parent Child Elements
Contextual elements can be combined to for a selector that will be applied only if a certain element pattern is used in the HTML.
(Only works in IE4)
If you wanted all Italic characters to be Blue but only if they were contained inside a H1 headline.
You could define the selector like this:
<style>
B ~ I {color: 000fff }
</style>
The syntax is:
ParentElement ~ ChildElement {declaration: value}
The following text would be bold but the Italic (e) would be rendered both Italic and Blue. However Italic text that is not contained inside a Parent B Element will be rendered just plain Italic and not blue.
<B>T<i>e</i>xt</B>Sequential Selectors
When you want to define a selector that would be applied only if one element directly follows another element you can use the following format.
(Only works in IE4)
<style>
/P ~ I/ {color: 000fff }
</style>The syntax is:
/FirstElement ~ SecondElement/ {declaration: value}
And would be applied as follows:
<P>Chickens</P>
<I>happy chickens</I>ID Elements
If you would like to define a declaration and value that you can apply to elements in your document but you do not want to apply this declarationto all tags of one type you can use an ID element and then apply that ID to your tags as you wish.
<style>
#abc123 {color: 000fff }
</style>
<P id=abc123> text </p>The syntax is:
ID {declaration: value }
The HTML Tag referenced:
<tag id=ID>
If you would like to set up optional declarations for a single element you can apply an ID to an element. This will allow you to use varying styles within the same element.
<style>
H1 #abc123 {color: 000fff }
</style>
<H1 id=abc123> text </H1>The syntax is:
Element ID {declaration: value }
The HTML Tag referenced:
<tag id=ID>
Class Elements
Class Elements are defined in a similar method to ID Elements. They can be applied various to HTML elements in a per element method or they can define a subset class of an element.
<style>
.chicken {color: 000fff }
</style>
<H1 class=”chicken”> text </H1>
The syntax is:
.class {declaration: value }
The HTML Tag referenced:
<tag class=”classname”>
Pseudo-Classes
The ability to change the properties of a element based on the state of the element can be accomplished by using a Pseudo Class Element.
The Anchor < A > element can have different rendering properties applied to it based upon the current state.
The possible variations include:
link - unvisited links
visited - visited links
hover - user hovers
active - active links
<style>
A:hover {color: orange }
</style>
<A href="file.html> click here </A>
The syntax is:
element:pseudo_class {declaration: value }
