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.

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

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

It is all about:
Content and Navigation...

Web Site by: A Safer Company LLC