Test your skills: Selectors Task 5

MDN Learn
#1

<!doctype html>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width" />

<title>Selectors: attribute selectors</title>

<style>

  body {

    background-color: #fff;

    color: #333;

    font:

      1.2em / 1.5 Helvetica Neue,

      Helvetica,

      Arial,

      sans-serif;

    padding: 1em;

    margin: 0;

  }

  ul {

    list-style: none;

    margin: 0;

    padding: 0;

  }

  li {

    margin: 0 0 0.5em;

  }

  a {

    display: block;

    padding: 0.5em;

  }

  a {

    border: 5px solid grey;

  }

  a[title] {

    border-color:  pink;

  }

  a[href*="contact"] {

    border-color:orange ;

  }

  a[href^="https"] {

    border-color: green;

  }

</style>

<ul>

  <li>

    <a href="https://example.com">Link 1</a>

  </li>

  <li>

    <a href="https://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>

Good morning, I need help on task 5. The link 2 seems to have the same color as link 1 which it should be pink. May I know the problem

#2

There are four a markups and four a element selectors containing border-color attribute, matching result is as below:

  1. the first <a...>Link 1</a> markup matches 1, 4 selectors and 4 wins. (Specificity: 1 with 001 < 4 with 011)
  2. the second <a...>Link 2</a> markup matches 1, 2, 4 selectors and 4 wins. (Specificity: 1 with 001< 2 with 011 = 4 with 011, then Order of Appearance: 2 before < 4 after)

The rules for determining which selector wins are called the cascade and inheritance.