CSS Selectors
There are many different types of CSS selector that allow you to target
rules to specific elements in an HTML document. The table on the opposite page introduces
the most commonly used CSS selectors.
On this page, there is an HTML file to demonstrate which elements
these CSS selectors would apply to. CSS selectors are case sensitive, so they
must match element names and attribute values exactly.
There are some more advanced selectors which allow you to select
elements based on attributes and their values. IE 7 was the first version of IE to support
the last two selectors in the table (the sibling selectors), so their use is
less common than the other selectors shown here
Code Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors</title>
</head>
<body>
<h1 id="top">Kitchen Garden Calendar</h1>
<p id="introduction">Here you can read our
handy guide about what to do when.</p>
<h2>Spring</h2>
<ul>
<li><a
href="mulch.html">
Spring mulch vegetable beds</a></li>
<li><a
href="potato.html">
Plant out early potatoes</a></li>
<li><a
href="tomato.html">
Sow tomato seeds</a></li>
<li><a href="beet.html">
Sow beet seeds</a></li>
<li><a
href="zucchini.html">
Sow zucchini seeds</a></li>
<li><a
href="rhubarb.html">
Deadhead rhubarb flowers</a></li>
</ul>
<p class="note">
This page was written by
<a
href="mailto:ivy@example.org">
ivy@example.org</a> for
<a
href="http://www.example.org">Example</a>.
</p>
<p>
<a href="#top">Top of page</a>
</p>
</body>
</html>
Some important slectors are as following!!!
Selector
|
Meaning
|
Example
|
Universal Selector
|
Applies to all elements in the document
|
* { }
Targets all elements on the page
|
Type Selector
|
Matches element names
|
h1, h2 , h3 { }
Targets the <h1>, <h2> and
<h3>
elements
|
Class Selector
|
Matches an element whose class attribute has a
value that matches the one specified after the period (or full stop) symbol
|
.note { }
Targets any element whose class attribute has a
value of note
p.note { }
Targets only <p> elements whose class
attribute has value of note
|
ID selector
|
Matches an element whose id attribute has a value
that matches the on specified after the pound or hash symbol
|
#introduction { }
Targets the element whose id attribute has a
value of instruction
|
Child Selector
|
Matches an element that is direct child of
another
|
li>a { }
Targets any <a > elements that are
children of an <li> element (but not other <a> elements in the
page)
|
Descendant Selector
|
Matches an element that is a descendent of
another specified element ( not just a direct child of that element)
|
P a { }
Targets any <a> elements that sit inside a
<p> element, even if there are other elements nested between them
|
Adjacent sibling selector
|
Matches an element that is the next sibling of
another
|
h1+p { }
Target the first <p> element after any
<h1> element( but not other <p> elements)
|
General sibling selector
|
Matches an element that is a sibling of another,
although it does not have to be the directly preceding element
|
h1~p { }
if you had two <p> elements that are
siblings of an <h1> element, this rule would apply to both
|
