<header>
  <h1>Link Option Examples</h1>
  <h2 class="h2--highlight">for Popup Maker Click Open Trigger Settings</h2>
  <p>Matches have a <span style="color:limegreen;">green</span> outline. Use the CodePen CSS editor tab to play around with the URLs in each selector. See what happens.</p>
</header>

<main>
  <div id="exact">
    <h2>Exact Match (=)</h2>
    <p>
      <code>a[href="https://wppopupmaker.com/docs"]</code>
    <ul>
      <li>
        <a href="https://wppopupmaker.com/docs">https://wppopupmaker.com/docs</a>
      </li>
      <li>
        <a href="https://docs.wppopupmaker.com/article/">https://docs.wppopupmaker.com/article/</a>
      </li>
      <li>
        <a href="https://wppopupmaker.com/docs/getting-started/add-a-popup-trigger/">https://wppopupmaker.com/docs/getting-started/add-a-popup-trigger/</a>
      </li>
      <li>
      </li>
    </ul>
    </p>
  </div>
  <div id="contains">
    <h2>Contains (*=)</h2>
    <p>
      <code>a[href*="glossary"]</code>
    <ul>
      <li>
        <a href="https://wppopupmaker.com/docs/getting-started/popup-maker-glossary-of-terms">https://wppopupmaker.com/docs/getting-started/popup-maker-glossary-of-terms</a>
      </li>
      <li>
        <a href="https://wppopupmaker.com/docs/getting-started/add-a-popup-trigger/">https://wppopupmaker.com/docs/getting-started/add-a-popup-trigger/</a>
      </li>
      <li>
      </li>
    </ul>
    </p>
  </div>
  <div id="begins">
    <h2>Begins With (^=)</h2>
    <p>
      <code>a[href^="https://wppopupmaker"]</code>
    </p>
    <ul>
      <li>
        <a href="https://wppopupmaker.com/blog">https://wppopupmaker.com/blog</a>
      </li>
      <li>
        <a href="https://docs.wppopupmaker.com">https://docs.wppopupmaker.com</a>
      </li>
    </uL>
  </div>
  <div>
    <h2>Ends With ($=)</h2>
    <p>
      <code>a[href$="maker/"]</code>
    </p>
    <ul>
      <li>
        <a href="https://wordpress.org/plugins/popup-maker/">https://wordpress.org/plugins/popup-maker/</a>
      </li>
      <li>
        <a href="https://wordpress.org/support/plugin/popup-maker/">https://wordpress.org/support/plugin/popup-maker/</a>
      </li>
      <li>
        <a href="https://wordpress.org/plugins/popup-maker">https://wordpress.org/plugins/popup-maker</a>
      </li>
      <li>
        <a href="https://wordpress.org/plugins/user-menus/">https://wordpress.org/plugins/user-menus/</a>
      </li>
    </uL>
  </div>
</main>
/** 
 * Link Match Examples 
 *
 * Play around with text between the double quotes in the
 * following 4 CSS selectors.
 * 1) Exact match
 * 2) Containing
 * 3) Begins with
 * 4) Ends with
 */

/* Exact Match */
div#exact a[href="https://wppopupmaker.com/docs"] {
  outline: 3px solid limegreen;
}
/* Change the URL above to https://docs.wppopupmaker.com/article/. What happens? */

/* Containing */
div#contains a[href*="glossary"] {
  outline: 3px solid limegreen;
}
/* Change "glossary" above to "trigger". What happens? */

/* Begins With */
div#begins a[href^="https://wppopupmaker"] {
  outline: 3px solid limegreen;
}
/* Change "wppopupmaker" above to "docs". What happens? */

/* Ends With */
a[href$="maker/"] {
  outline: 3px solid limegreen;
}
/* Change "maker/" above to "menus/". What happens? */

/** End of Link Match Examples */

/** General Styles */

:root {
  --orange: #fe5d26ff;  
}

body {
  font-size: 18px;  
}

.h2--highlight {
  color: var(--orange);
}

a, 
code {
  font-size: 1.5rem;
}

ul {
  list-style: none;
}

li {
  margin-bottom: 0.5em;
}
Run Pen

External CSS

  1. https://cdn.jsdelivr.net/gh/marklchaves/cme-styles@1.0.0/dist/cme-styles.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.