Notice: Undefined index: testing in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/webdesign/4_Physical_Design/Coding_CSS3/selectors.html on line 168

Notice: Undefined variable: docRoot_secure in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/webdesign/4_Physical_Design/Coding_CSS3/selectors.html on line 184

Training

"Winners make choices,
losers make excuses."
Decide to be a Winner!!!!

±Arrows Getting Started

± Phase 1
Planning

± Website Tools

± Phase 3
Conceptual Design

± Helpful Information

± Phase 4
Physical Design

± Phase 5
Testing

± Phase 6
Implement and Market Website

± Other Web Development Items

± Multimedia

± Useful Utilities

± Programming

± Advanced Programming

± Microsoft Office Products

± Computer Maintenance

± Other

Web Design

NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.


Notice: Undefined variable: message in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/webdesign/Templates/code/dir_listing_enhanced.php on line 67

Notice: Undefined variable: message in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/webdesign/Templates/code/dir_listing_enhanced.php on line 72

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Notice: Undefined variable: print_folder_data in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/webdesign/Templates/code/dir_listing_enhanced.php on line 111

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Notice: Undefined variable: print_file_data in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/webdesign/Templates/code/dir_listing_enhanced.php on line 127

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Notice: Undefined variable: message in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/webdesign/Templates/code/WebDesign_toc.php on line 12

Notice: Undefined variable: message in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/webdesign/4_Physical_Design/Coding_CSS3/selectors.html on line 292

CSS Selectors

CSS selectors are patterns used to select the element(s) you want to style.

CSS 2
Selector Example Example description  
.class .intro Selects all elements with class="intro"  
#id #firstname Selects the element with id="firstname"  
* * Selects all elements  
element p Selects all <p> elements  
element,element div,p Selects all <div> elements and all <p> elements  
element element div p Selects all <p> elements inside <div> elements  
element>element div>p

Selects all <p> elements where the parent is a <div> element

  • selects direct children
  • will only target the ul which are direct children of the div with an id of container. It will not target, for instance, the ul that is a child of the first li.
±Example
Close Window

HTML

<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>

CSS

#container > ul {
color: green;
}
  
element+element div+p Selects all <p> elements that are placed immediately after <div> elements  
[attribute] [target] Selects all elements with a target attribute  
[attribute=value] [target=_blank] Selects all elements with target="_blank"  
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower"  
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en"  
:link a:link Selects all unvisited links  
:visited a:visited Selects all visited links  
:active a:active Selects the active link  
:hover a:hover Selects links on mouse over  
:focus input:focus Selects the input element which has focus  
:first-letter p:first-letter Selects the first letter of every <p> element  
:first-line p:first-line Selects the first line of every <p> element  
:first-child p:first-child Selects every <p> element that is the first child of its parent  
:before p:before Insert content before  the content of every <p> element  
:after p:after

Insert content after every <p> element

 

  
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"  
CSS3
element1~element2 p~ul

Selects every <ul> element that are preceded by a <p> element

  • select any p elements, as long as they follow a ul
  
  a[title] Selects the anchor tags that have a title attribute.  
[attribute^=value] 
a[src^="https"]
a[href^="http://"]
p[title^="Hello"]

Selects every <a> element whose src attribute value begins with "???"

±Example
Close Window

HTML

<div class="example1">
<ul>
<li><a href="http://www.google.com">Visit a website</a></li>
<li><a href="https://www.google.com">Visit a secure website</a></li>
<li><a href="mailto:email@email.com">Send an email</a></li>
<li><a href="ftp://www.google.com">Connect to an FTP server</a></li>
<li><a href="magnet:…">Download from a magnet link</a></li>
</ul>
</div>

CSS

div.example1 ul {
     list-style-type: none;
     }
     
     div.example1 ul li a {
     padding-left: 20px;
     background-image: url(/images/icon/file.png);
     background-repeat: no-repeat;
     }
     
     div.examples1 ul li a[href^="https://"] {
     background-image: url(/images/icon/lock.png);/*shows lock.png ofr https: files*/
     }
     
     div.example1 a[href^="mailto:"] {
     background-image: url(/images/icon/mail.png);
     }
     
     div.example1 a[href^="ftp://"] {
     background-image: url(/images/icon/folder_ftp.png);
     }
     
     div.example1 a[href^="magnet"] {
     background-image: url(/images/icon/magnet.png);
     }
  • Chrome 2+
  • Firefox 3.01+
  • IE 7+
  • Opera 9.59.2+
  • Safari 1.3+
[attribute$=value] 
a[src$=".pdf"]
p[title$="Today"]

Selects every <a> element whose src attribute value ends with ".pdf"

±Example
Close Window

HTML

<div class="example2">
<ul>
<li><a href="file.pdf">A link to a PDF document</a></li>
<li><a href="file.docx">A link to a Word document</a></li>
<li><a href="file.xlsx">A link to an Excel document</a></li>
<li><a href="file.mp3">A link to an MP3 file</a></li>
<li><a href="http://www.css3.info">A normal web link</a></li>
</ul>
</div>

CSS

div.example2 ul {
     list-style-type: none;
     }
     
     div.example2 ul li a {
     padding-left: 20px;
     background-image: url(/images/icon/file.png);
     background-repeat: no-repeat;
     }
     
     div.example2 ul li a[href$=".pdf"] {
     background-image: url(/images/icon/pdf.png);
     }
     
     div.example2 ul li a[href$=".docx"] {
     background-image: url(/images/icon/word.png);
     }
     
     div.example2 ul li a[href$=".xlsx"] {
     background-image: url(/images/icon/excel.png);
     }
     
     div.example2 ul li a[href$=".mp3"] {
     background-image: url(/images/icon/audio.png);
     }
  • Chrome 2+
  • Firefox 3.01+
  • IE 7+
  • Opera 9.59.2+
  • Safari 1.3+
[attribute*=value] 
a[src*="asaferco"]

Selects every <a> element whose src attribute value contains the substring "asaferco"

±Example
Close Window

HTML

<div class="example3">
<ul>
<li><a href="http://www.google.com">A link to Google</a></li>
<li><a href="http://www.twitter.com/css3">A link to a Twitter profile</a></li>
<li><a href="https://www.facebook.com/css3.info">A link to a Facebook page</a></li>
<li><a href="http://www.yahoo.com">A link to Yahoo</a></li>
<li><a href="http://www.bing.com">Any other link</a></li>
</ul>
</div>

CSS

    div.example3 ul {
        list-style-type: none;
    }
    
    div.example3 ul li a {
        padding-left: 20px;
        background-image: url(/images/icon/file.png);
        background-repeat: no-repeat;
    }
    
    div.example3 ul li a[href*="google.com"] {
        background-image: url(/images/icon/google.png);
    }
    
    div.example3 ul li a[href*="twitter.com"] {
        background-image: url(/images/icon/twitter.png);
    }
    
    div.example3 ul li a[href*="facebook.com"] {
        background-image: url(/images/icon/facebook.png);
    }
    
    div.example3 ul li a[href*="yahoo.com"] {
        background-image: url(/images/icon/yahoo.png);
    }
  • Chrome 2+
  • Firefox 3.01+
  • IE 7+
  • Opera 9.59.2+
  • Safari 1.3+
[myattribute="myword"] 
a[data-filetype="image"] {
    color: red;  
    } 

Selects our own attribute which equals myword.

a[data-filetype="image"] {
color: red;
}

  
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent  
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent  
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent  
:only-child p:only-child Selects every <p> element that is the only child of its parent  
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent  
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child  
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent  
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child  
:last-child p:last-child Selects every <p> element that is the last child of its parent  
:root :root Selects the document’s root element  
:empty p:empty Selects every <p> element that has no children (including text nodes)  
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name) Internet Explorer does not support the :target selector.
:enabled input:enabled Selects every enabled <input> element  
:disabled input:disabled Selects every disabled <input> element  
:checked

input:checked

 

Selects every checked <input> element

input[type=radio]:checked {
   border: 1px solid black;
}
  
:not(selector) :not(p) Selects every element that is not a <p> element  
::selection ::selection Selects the portion of an element that is selected by a user  

top of page


Warning: Use of undefined constant PHP_SELF - assumed 'PHP_SELF' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/webdesign/4_Physical_Design/Coding_CSS3/selectors.html on line 806

Page last updated: June 06, 2012 17:19 PM

It is all about:
Content and Navigation...

Web Site by: A Safer Company LLC