Class 3 – Basic CSS Selectors
Here is an overview of the basic CSS selectors. Please make sure you have read the CSS tutorials on the w3schools site before proceeding.
selecting particular tag names
p {
/* some css code here */
}
This select would match any and all <p> tags in the XHTML document.
selecting particular tag ids
p#some_id {
/* some css code here */
}
This selector would apply styles to any p tag with an id=”some_id”, such as:
<p id="some_id">some text</p>
selecting particular classes
p.some_class {
/* some css code here */
}
This selector would apply styles to any <p> tags with class=”some_class”. For example, it would match this code in the XHTML:
<p class="some_class">This is some text in the paragraph</p>
selecting particular child elements
p#some_id a {
/* some css code here }
This selector matches any <a> tag that is a child of a <p> tag with id=”some_id”. For example, it would match the <a> tag in the following code snippet:
<p id="some_id"> This is a paragraph of text with a <a href="http://google.com">link in it</a> </p>
selecting direct descendents of an element
p > a {
/* some css code here */
}
This CSS code would match any <a> elements that are direct descendents of any <p> elements. For example, it would match the <a> tag in the following code snippet:
<p> This is a paragraph of text with a <a href="http://google.com">link in it</a> </p>
But it would NOT match the <a> tag in this example:
<p>
This is a paragraph of text with a
<ul>
<li>This is a <a href="http://google.com">link</a></li>
</ul>
</p>
This does not match because the <a> tag is not a direct descendant of the <p> tag. It is a grandchild element of the <p>, not a direct child element.
Related posts:
Tags: class 3
Loading ...