((!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"))
((html))
((head))
((title))Complete CSS Guide: Selectors((/title))
((meta name="description" content="Cascading Style Sheets (CSS) Tutorial and Reference - Selectors" /))
((meta name="keywords" content="stylesheet, stylesheets, style sheet, style, CSS, CSS1, CSS2, Web, web standards, standards, Cascading Style Sheets, tutorial, reference, help, guide, selectors" /))
((meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /))
((link rel="stylesheet" type="text/css" href="../../../house/house.css" /))
((/head))
((body))
((div id="sm-layer"))((a href="../../../index.html"))style master: ((span class="subtext"))cascading style sheet editor((/span))((/a))((/div))
((div id="lm-layer"))((a href="../../../../layout_master/index.html"))layout master: ((span class="subtext"))web page layout editor((/span))((/a))((/div))
((div id="house-layer"))((a href="../../../house/index.html"))house of style: ((span class="subtext"))cascading style sheets resources((/span))((/a))((/div))
((div id="courses-layer"))((a href="../../../../courses/index.html"))courses: ((span class="subtext"))self paced standards based web development courses((/span))((/a))((/div))
((h1))the complete CSS guide((/h1))
((div id="left-navbar"))
((p class="hideIEMacBug"))�((/p))
((p class="left-navbar"))((a href="../introduction/index.html" class="left-current"))css guide((/a))((/p))
((p class="left-navbar"))((a href="../../../house/tutorials/index.html"))tutorials((/a))((/p))
((p class="left-navbar"))((a href="../../../house/good_oil/index.html"))articles((/a))((/p))
((p class="left-navbar"))((a href="../../../house/css_layout/index.html"))css layout((/a))((/p))
((p class="left-navbar"))((a href="../../browser_support/index.html"))browser compatibility((/a))((/p))
((p class="left-navbar"))((a href="../../links.html"))links((/a))((/p))
((p class="left-navbar"))((a href="../../../../courses/free/index.html"))free courses((/a))((/p))
((p class="left-navbar"))((a href="http://four.pairlist.net/mailman/listinfo/css-foundations"))css-foundations mailing list((/a))((/p))
((p class="left-navbar"))((a href="http://westciv.typepad.com/standards/"))web standards blog((/a))((/p))
((p class="left-navbar"))((a href="../../../house/contact/index.html"))contact((/a))((/p))
((p class="left-navbar"))((a href="../../../house/search.html"))search((/a))((/p))
((p class="left-navbar-1st-ad"))((a href="../../../index.html"))((img src="../../../house/images/decor/sm_guide_blue.gif" alt="Style Master CSS Editor" /))((/a))((br))New!((br))((a href="../../../index.html"))Style Master 3 now available for Macintosh OS X and Windows((/a))((/p))
((/div))
((div id="main-content"))
((p class="crumb-trail"))((a href="../../../house/index.html" class="crumb-back"))the house of style((/a))((span class="crumb-arrow")) >> ((/span))((a href="../index.html" class="crumb-back"))the complete CSS guide((/a))((span class="crumb-arrow")) >> ((/span))((a href="index.html" class="crumb-back"))selectors((/a))((span class="crumb-arrow")) >> ((/span))((span class="crumb-current"))introduction((/span))((/p))
((p class="top-navbar2"))((a href="../index.html"))contents((/a)) | ((a href="../introduction/index.html"))introduction((/a)) | ((a href="index.html" class="current"))selectors((/a)) | ((a href="../properties/index.html"))properties((/a)) | ((a href="../advanced/index.html"))advanced((/a)) | ((a href="../real_world/index.html"))real world CSS((/a))((/p))
((p class="top-navbar2"))((a href="index.html" class="current"))introduction((/a)) | ((a href="type_selectors.html"))type((/a)) | ((a href="class_selectors.html"))class((/a)) | ((a href="id_selectors.html"))ID((/a)) | ((a href="descendant_selectors.html"))descendant((/a)) | ((a href="p_class_selectors.html"))link pseudo class((/a)) | ((a href="p_element_selectors.html"))pseudo element((/a)) | ((a href="selector_groups.html"))selector groups((/a)) | ((a href="dyn_p_class_selectors.html"))dynamic pseudo class((/a)) | ((a href="lang_p_class_selectors.html"))language pseudo class((/a)) | ((a href="child_selectors.html"))child((/a)) | ((a href="first_child_selectors.html"))first child((/a)) | ((a href="adjacent_selectors.html"))adjacent((/a)) | ((a href="attribute_selectors.html"))attribute((/a))((/p))
((p class="top-navbar2"))((a href="https://order.kagi.com/cgi-bin/store.cgi?storeID=WC1&&"))((strong))Save((/strong)): Register ((strong))Style Master 3 CSS Editor((/strong)) and receive a free copy of the ((strong))Complete CSS Guide((/strong))((/a))((/p))
((p class="nav-arrows"))((a href="../introduction/statements.html"))((img src="../../../house/images/decor/back_arrow.gif" alt="back" /))((/a))((a href="index.html"))((a href="type_selectors.html"))((img src="../../../house/images/decor/forward_arrow.gif" alt="forward" /))((/a))((/p))
((h2))((a name="intro"))((/a))Selectors introduction((/h2))
((p))Now it is time to take a deep breath, and concentrate a little. I really don't believe that cascading style sheets are hard to master, but they can be a little tricky. In a few short minutes, we'll cover what I think can be the hardest part of style sheets to "get": selectors.((/p))
((h3))((a name="what"))((/a))What do selectors do?((/h3))
((p))You'll probably find the constant repetition a little tedious, but I do want to reiterate what a selector does.((/p))
((p))A selector identifies elements on an HTML page. Browsers use selectors to determine which elements on a page are affected by a statement.((/p))
((p))Now, we saw in the previous lesson that selectors can identify HTML elements, such as paragraphs, the body, and so on. In fact, selectors can identify ((em))any((/em)) html element, but they can do a lot more than that. We'll take a look at the different types of selector, then concentrate on each type, what it does, and how to use it. You're now really entering the reference part of this guide.((/p))
((h3))((a name="types"))((/a))Types of selector((/h3))
((p))The specification organizes and groups the different selectors according to their more theoretical characteristics. We've reorganized them according to how they are generally used. The different types of selectors we separate out are((/p))
((ul))
((li))((a href="index.html"))introduction((/a)) | ((a href="type_selectors.html"))type selectors((/a))
((li))((a href="class_selectors.html"))class selectors((/a))
((li))((a href="id_selectors.html"))ID selectors((/a))
((li))((a href="descendant_selectors.html"))descendant selectors ((/a))
((li))((a href="p_class_selectors.html"))link pseudo class selectors((/a))
((li))((a href="p_element_selectors.html"))pseudo element selectors((/a))
((li))((a href="selector_groups.html"))selector groups((/a))
((li))((a href="dyn_p_class_selectors.html"))dynamic pseudo class selectors ((/a))
((li))((a href="lang_p_class_selectors.html"))language pseudo class selectors((/a))
((li))((a href="child_selectors.html"))child selectors((/a))
((li))((a href="first_child_selectors.html"))first child selectors((/a))
((li))((a href="adjacent_selectors.html"))adjacent selectors((/a))
((li))((a href="attribute_selectors.html"))attribute selectors((/a))
((/ul))
((p))For each type of selector we ask((/p))
((ul))
((li))what they do
((li))how they are formed - their syntax
((li))why you might use them
((li))how well they are supported in various browsers
((/ul))
((p class="bot-navbar2"))((a href="../index.html"))contents((/a)) | ((a href="../introduction/index.html"))introduction((/a)) | ((a href="index.html" class="current"))selectors((/a)) | ((a href="../properties/index.html"))properties((/a)) | ((a href="../advanced/index.html"))advanced((/a)) | ((a href="../real_world/index.html"))real world CSS((/a))((/p))
((p class="bot-navbar2"))((a href="index.html"))introduction((/a)) | ((a href="type_selectors.html"))type((/a)) | ((a href="class_selectors.html"))class((/a)) | ((a href="id_selectors.html"))ID((/a)) | ((a href="descendant_selectors.html"))descendant((/a)) | ((a href="p_class_selectors.html"))link pseudo class((/a)) | ((a href="p_element_selectors.html"))pseudo element((/a)) | ((a href="selector_groups.html"))selector groups((/a)) | ((a href="dyn_p_class_selectors.html"))dynamic pseudo class((/a)) | ((a href="lang_p_class_selectors.html"))language pseudo class((/a)) | ((a href="child_selectors.html"))child((/a)) | ((a href="first_child_selectors.html"))first child((/a)) | ((a href="adjacent_selectors.html"))adjacent((/a)) | ((a href="attribute_selectors.html"))attribute((/a))((/p))
((p class="bot-navbar2"))((a href="https://order.kagi.com/cgi-bin/store.cgi?storeID=WC1&&"))((strong))Westciv Complete Standards Based Web Development Package((/strong)): Style Master + Layout Master + HTML 4 Course + CSS Level 1 Course + CSS Level 2 Course + Color and Graphics Course + The Complete CSS Guide - Just $129.99((/a))((/p))
((p class="nav-arrows"))((a href="../introduction/statements.html"))((img src="../../../house/images/decor/back_arrow.gif" alt="back" /))((/a))((a href="index.html"))((a href="type_selectors.html"))((img src="../../../house/images/decor/forward_arrow.gif" alt="forward" /))((/a))((/p))
((/div))
((div id="copy-notice"))((p))((a href="../../../../copyright.html"))� 1997-2003 Western Civilisation Pty. Ltd.((/a))((/p))
((p))((a href="http://www.westciv.com/"))westciv.com((/a))((/p))
((/div))
((div id="lm-made"))((a href="http://www.westciv.com/layout_master/"))((img src="../../../images/decor/made_with_lm_small.gif" alt="Page Layout by Layout Master" /))((/a))((/div))
((div id="sm-made"))((a href="http://www.westciv.com/style_master/"))((img src="../../../images/decor/made_with_sm_small.gif" alt="CSS by Style Master" /))((/a))((/div))
((/body))
((/html))
