CODEWITHSUNDEEP
htmlcssattributes
Dumb Noob
Dumb Noob

Reputation: 57

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;
}

Upvotes: 1

Views: 32

Answers (1)

pradeep1991singh
pradeep1991singh

Reputation: 8365

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 exmaples follow this - post here

For documentation - Attribute selectors documentation

Upvotes: 3

Related Questions