A Smarter Way To Learn HTML & CSS(2015)

40
More CSS selectors

A CSS selector is everything on the first line that precedes the {. It’s the part of a style rule that tells the browser what elements, classes, and ids a rule applies to. The selectors are highlighted in the following code fragments.

p {
p.special {
.special {
p#intro {
#intro {

So far you’ve learned to create…

1. An element selector like p, div, or img.

2. An element class selector like p.special, div.important, or img.gallery.

3. A class selector tied to no particular type of element like .special, .important, or .gallery.

4. An element id selector like p#intro, div#sidebar, or img#logo.

5. An id selector tied to no particular type of element like #intro, #sidebar, or #logo.

You can combine selectors to create more complicated selectors. Here’s one.

div.important p {

The code above selects all paragraphs in a div that’s been assigned the class “important.”

The following code selects all images…that are in list items…in an unordered list…with the id “pix-list.”

ul#pixList li img {

Here’s some code that selects the first paragraph following any div.

div + p {

The following code selects only the first level of divs within the div that has an id of “main.”

div#content > div {

So in the following code, only the highlighted divs are selected.

<div id="main">
<div>
<div>
[some content]
</div>
[some content]
<div>
[some content]
</div>
</div>
<div>
[some content]
<div>
[some content]
</div>
</div>

You can learn a lot about selectors by playing around with the interactive W3Schools CSS selector tester at http://www.w3schools.com/CSSref/trysel.asp.

In your HTML file you coded a div with an id. In your CSS file double the size of all paragraphs within that div. Save the file. Display the page.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-40-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/40.html