Test: Selector5

by Svitcher

HTML

<ul>
    <li><a href="https://example.com">Link 1</a></li>
    <li><a href="http://example.com" title="Visit example.com">Link 2</a></li>
    <li><a href="/contact">Link 3</a></li>
    <li><a href="../contact/index.html">Link 4</a></li>
</ul>

CSS

a {
    border: 5px solid grey ;
   line-height: 3; 
   padding: 0 100px 0 0;
   
}
li [title='Visit example.com'] {
  border-color: pink;
}
li [href*="contact"] {
  border-color: orange;
}
li [href^="https"] {
  border-color: green;
}