<p key="key one paragraph">Key One</p>
<p key="key two paragraph">Key Two</p>

<p data-target="a certain target">A certain target</p>
<p data-target="another target">Another target</p>

<p greeting="hello world">Attribute value begins with hello</p>
<p greeting="welcome friend">Attribute value doesn't begin with hello</p>

<a href="dev.to">DEV.TO</a>
<a href="google.com">GOOGLE</a>

<p lang="en-US">Howdy</p>
<p lang="en-en">God save the Queen</p>
<p lang="en">Good morning</p>
<p lang="fr">Bonjour!</p>

<p link="report.pdf">PDF here</p>
<p link="report.html">Html here</p>
/* ~= */
p[key~="one"] {
  color: orange;
}

/* *= */

p[data-target*="arge"] {
  font-weight: bold;
  font-size: 20px;
}

/* ^= */

p[greeting^="hello"] {
  background-color: green;
}

/* $= */

a[href$=".to"] {
  color: red;
  font-weight: bold;
}

/* |= */
p[lang|="en"]{
  border: 3px solid blue;
}


/* i */

p[link$=".PdF"i]{
  color: orange;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.