Dumb Noob Dumb Noob - 15 days ago 5
HTML Question

Modify in-line elements with certain HTML attributes through CSS

Is it possible to do so like with links (a[href="/"]{/*CSS declarations.*/})?

For example:

#example > .meow span[style="color:red;"] {
text-transform: lowercase;
}

#example > .woof span[title="I'm a dog."] {
color: blue;
text-decoration: underline;
}

Answer

Yes you do that :

  • Here we select the link with the exact href value "https://www.css-tricks.com", and change its color and font size. Notice that the link to the almanac is not styled.

See below code

a[href="https://www.css-tricks.com"] { 
  color: #E18728;
  font-size: 1.5em;
}

#example > .meow span[style="color: red;"] { 
  text-transform: lowercase;
  font-size: 45px;
}
<p><a href="https://www.css-tricks.com">CSS-Tricks</a></p>
<p><a href="https://www.css-tricks.com/almanac">CSS-Tricks Almanac</a></p>
<hr>

<div id="example">
  <div class="meow">
    <span style="color: red;">TEST</span>
  </div>
</div>

For more follow this post here

Comments