HTML and CSS Reference
+ - (e.g. header+ p ) Selects the second element when the first element is the preceding
~ - (e.g. p~ header ) Selects the second element when it follows the first element (not
To illustrate the last two, if your document looks like this:
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:
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.
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:
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: