Difference between revisions of "Selectors"

Latest revision as of 21:48, 4 April 2009

Selectors

Contextual Selectors

Contextual selectors use more than one tag in the selector. The tag closest to the declaration is the targeted tag. The additional tag(s) state where the target tag must be located in the markup up in order for target tag to be affected. Contextual selectors have spaces between them.

Example: The p is targeted tag. Only p tags within div tags will be red.

div p {color:red;}

Contextual selector examples

<html>
<head>
	<title>Contextual Selector Example 1</title>
	<link href="style_sheets/contextual_selector_example_1.css" rel="stylesheet" type="text/css">
</head>
<body>

Child selectors

Write a rule so the target tag has to be a child of a specific tag.

p>em {color:green;}

Contextual Class Selectors

You can combine tag and class name to make a selector more specific.

The second line states any tags with "specialtext" class will be bold.

The third line states "specialtext" class must be within the context of p tag for rule to apply.

p { font-family: Helvetica, sans-serif; }
.specialtext { font-weight:bold; }
p.specialtext { color:red}

| Class Selector Example 0

You can further specify by adding more tags.

The fourth line states span tag within a paragraph with "specialtext" class will be italicized

p { font-family: Helvetica, sans-serif; }
.specialtext { font-weight:bold; }
p.specialtext { color:red}
p.specialtext span { font-style:italic; }

| Class Selector Example 1

Skipping the restrictions of hierarchy

The line states span tag can be a descendant of any tag with specialtext class

.specialtext span { color:blue; }

IDs

ID synax is similar to classes except a hash (#) symbol is used versus a class's period.

Difference between Classes & IDs

The ID can only be used once per page and a class may appear many times.

If you want to identify a unique piece of your page's markup use an ID.

If you want to apply rules to multiple tags in same page or many pages use a class.

Example using an ID for a wrapper container:

#wrap {min-width:800px; max-width:1000px; margin-left:auto; margin-right:auto; text-align:left;}

Universal Selector

The asterisk (*) means anything so this rule means all text will be blue.

* { color:blue; }

Another use is as the inverse of a child selector. This rule means any em tag that is at least a grandchild of the p tag, but not a child, is selected.

p * em { font-weight:bold; }

A nice tip is to set all margin and padding to zero so browsers are same.

* { margin:0; padding:0; }

Adjacent Sibling Selector

Rule selects a tag that follows a specific sibling tag. p48

Attribute Selector

Attribute selectors use the attributes of the tag. p48

Back to Cascade Style Sheets

@@ Line 82: / Line 82: @@
 <pre>p * em { font-weight:bold; }</pre>
+A nice tip is to set all margin and padding to zero so browsers are same.
+<pre>* { margin:0; padding:0; }</pre>
 === Adjacent Sibling Selector ===