HTML and CSS Reference
In-Depth Information
•
+
- (e.g.
header+
p
) Selects the second element when the first element is the preceding
sibling.
•
~
- (e.g.
p~
header
) Selects the second element when it follows the first element (not
necessarily immediately).
To illustrate the last two, if your document looks like this:
<h1>Some header</h1>
<h2>Some sub-header</h2>
<p>Some text</p>
he
h1+
p
selector will not return any element but both
h2+
p
and
h1~
p
will both return the
p
element.
Class and ID Selectors
The class selector allows you to select elements with a specific
class
attribute. For this reason, the
class
attribute
is often referred to as the css class. A class selector is created by prefixing the class name with “. ” like this:
.featured
{
background-color:yellow;
}
This will apply the background color for all elements that have
class=
"featured"
attribute. The class
selector looks for whole words that match the selector value. An element can have multiple words in the
class
attribute like
class=
"the featured article"
and the
.featured
selector will return it.
■
in the HTMl document, the class attribute is a string that can have any value you want to give it.
However, to be able to use it in a class selector it must not have any white space or other characters that are not
compatible with the Css syntax. For example, you cannot select
class=
"featured content"
in a class selector.
instead you'll need to use an attribute selector, which i will demonstrate later.
Caution
An ID selector works just like a class selector except that it uses the
id
attribute instead of
class
and you
prefix it with a hash symbol (“#”) like this:
#Submit
{
color:blue;
}
An ID selector specifies a single element based on its unique id so, by definition, the style will not be reused.
It is better to define styles based on elements or classes so similar elements can be styled the same way. ID
selectors should be used sparingly and only for unique situations where the style does not need to be reused.
Using Attribute Selectors
Attribute selectors give you a great deal of flexibility, allowing you to select elements based on any of the
element's attributes. These are specified as
[attribute=
value]
like this:
