CSS selectors

Css selectors examples

by vaheed akhtar

HTML

<!-- Example 1 -->
<h1 class="top-header">Header</h1>
<p class="top-text">One</p>
<p class="topContent">Two</p>
<p class="top header">Three</p>
<p class="top text">Four</p>
<p class="top content">Five</p>
<hr/ >
<!-- Example 2 -->

<p class="first-top">One</p>
<p class="first-top">Two</p>
<p class="firsttop">Three</p>
<p class="topfirst">Four</p>

CSS

/* #######Example 1##### */

/* there is no effect */
/* [class="top"] {
  color: red;
} */

/* Three Four Five */
/* [class~="top"] {
  color: red
} */

/* Header One */
/* [class|="top"] {
  color: red;
} */

/* Header One Two Three Four Five */
/* [class^="top"] {
  color: red;
} */

/* #########Example 2######## */

/* One Two Three ($ start from left)
[class$="top"] {
  color: red;
} */

/* All got effected red*/
[class*="top"] {
  color: red;
}