Style element based on title attribute

Question

I have a requirement where , the below is my structure of html.

    <div class = "tag-cloud">
      <ul>
        <li class = "volume1"><a title= "style separately element1 element2"> heading1</a></li>
        <li class = "volume2"><a title= "style separately element1 element2"> heading2</a></li>
      </ul>
    </div>

In the css file ,

     .tag-cloud ul {
        padding: 0;
        text-align: center;
        position: relative;
     }

      .tag-cloud li {
          display: inline-block;
          padding: 0.02em;
          margin: 0 0.3em;
          list-style: none;
     }

     .tag-cloud .volume1 {
          font-size: 0.8em;
          color: #C3D1DF;
      }

      .tag-cloud .volume2 {
          font-size: 1em;
          color: #C3D1DF;
       }

Now my requirement is to have a separate font for the text inside the of the anchor elements "style separately element1 element2" irrespective of the li classes. Right now its inheriting the style from the li class even though I tried the below code to give separate font for the text inside the tag of the anchor element.

         .tag-cloud ul li a[title]:hover::after{
              content: attr(title);
             font-size:.75em !important;
             text-decoration: none;
             display:block;
             color: #0096D6;
             position:absolute;
             width:400px;
             height:100px;
          }

Please let me know what I'm missing. Thanks in advance.

Possible duplicate of [How to change the style of Title attribute inside the anchor tag?](http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag) — haxxxton, Jan 30 '17 at 02:53
I made an edit to your question title that I think makes it more clear what you're asking here. — But those new buttons though.., Jan 30 '17 at 03:04

score 2 · Answer 1 · answered Jan 30 '17 at 02:55

You want to style using an attribute selector. http://www.w3schools.com/css/css_attribute_selectors.asp

.tag-cloud ul {
  padding: 0;
  text-align: center;
  position: relative;
}

.tag-cloud li {
  display: inline-block;
  padding: 0.02em;
  margin: 0 0.3em;
  list-style: none;
}

.tag-cloud .volume1 {
  font-size: 0.8em;
  color: #C3D1DF;
}

.tag-cloud .volume2 {
  font-size: 1em;
  color: #C3D1DF;
}

a[title="style separately element1 element2"] {
  color: red;
  font-size:.75em
}

<div class="tag-cloud">
  <ul>
    <li class="volume1"><a title="style separately element1 element2"> heading1</a></li>
    <li class="volume2"><a title="style separately element1 element2"> heading2</a></li>
  </ul>
</div>

Thanks for the response, but I have different values for , its actually inside a for loop in javascript and title takes different value upon each iteration. — Jerry, Jan 30 '17 at 03:04
@Jerry - the answer he gave demonstrates how to select based on attribute in the code shown in your question. If the actual code is different just change the css accordingly. — But those new buttons though.., Jan 30 '17 at 03:10

score 0 · Answer 2 · answered Jan 30 '17 at 03:15

0

Add a 'style' attribute inside each anchor tag

<a style="font-family:Arial, helvetica" title= "style separately element1 element2"> heading1</a>

answered Jan 30 '17 at 03:15

Tech AG

64
3

Thanks, but this style attribute is getting applied to the heading1 but I want it to get applied to the title= "style separately element1 element2" – Jerry Jan 30 '17 at 03:25
I did not understand what you are saying. style is always applied to element not attribute – Tech AG Jan 30 '17 at 10:36

Style element based on title attribute

2 Answers2