<p>Not all <a data-position="paragraph" href="#">Fruits</a> are sweet</p>

<ul class="big">
  <li class="big"><a href="apple.fruit" >Apple</a></li>
  <li><a href="pineapple.fruit">Pineapple</a></li>
  <li><a href="orange.fruit">Orange</a></li>
  <li  class="big border"><a href="kiwi.fruit">Kiwi</a></li>
   <li><a href="cucumber.veggie">Cucumber</a></li>
   <li><a href="broccoli.veggie">Broccoli</a></li>
   <li><a href="bittergaurd.veggie">Bitter gaurd</a></li>
/* Select <a> tag which has data-position attribute */
a[data-position] {
  color: magenta;

/* <a> where href is equal to orange.fruit  */
a[href="orange.fruit"] {
  color: orange;

/* <a> where href contains apple  */
a[href*="apple"] {
  color: red;

/* <a> where href ends with veggie  */
a[href$=".veggie"] {
  color: green;

/* <a> where href starts with kiwi  */
a[href^="kiwi"] {
  color: violet;

/* <li> where class attribute contanis "big"  */
li[class~="big"] {
  font-size: 24px;

/* <li> where class attribute contains "border" */
li[class~="border"] {
  border: 1px solid orangered;
  padding: 4px;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.