rails: css_dictionary.css

css_dictionary.css

// CSS dictionary

// <a href="#" rel="friend nofollow">Larry</a>
li a[rel~='friend'] {
  font-weight: bold;
}

// target only #upperSection, #lowerSection
// <div id="upperSection">
//     <p>Lorem ipsum dolor sit amet...</p>
// </div>
 
// <div id="somethingElse">
//     <p>Lorem ipsum dolor sit amet...</p>
// </div>
 
// <div id="lowerSection">
//     <p>Lorem ipsum dolor sit amet...</p>
// </div>
 
// <div id="footer">
//     <p>Lorem ipsum dolor sit amet...</p>
// </div>

div[id*='Section'] {
  color: red;
}

// target begin with or end with
// <ul>
//     <li><a href="#" title="stooge one">Larry</a></li>
//     <li><a href="#" title="the second stooge">Curly</a></li>
//     <li><a href="#" title="stooge three">Moe</a></li>
//     <li><a href="#" title="impostor">Curly-Joe</a></li>
// </ul>

li a[title^='stooge'] {
  color: red
} /*Beginning*/
li a[title$='stooge'] {
  color: yellow
} /*Ending*/

// Chaining Attribute Selectors

// <ul>
//     <li><a href="#" title="stooge one">Larry</a></li>
//     <li><a href="#" title="the second stooge">Curly</a></li>
//     <li><a href="#" title="stooge three">Moe</a></li>
//     <li><a href="#" title="the impostor">Curly-Joe</a></li>
// </ul>

li a[title*='stooge'][title^='the'] {color: red;}

// The Book of CSS3

// <div id="combinators">
//     <p>Not this one.</p>  
//     <h1>Gibberish</h1>
//     <p>Pick me!</p>
//     <p>Lorem ipsum dolor sit amet...</p>
//     <p>Lorem ipsum dolor sit amet...</p>
//     <p>Lorem ipsum dolor sit amet...</p>
// </div>

h1 + p {color: orange;}

// all after h1

h1 ~ p {color: orange;}