0

Based on my title attribute I need to change color of my cell inside table

Consider below example whenever my title value says WHO - I need to change color of my <p> element to RED

<!DOCTYPE html>
<html>
    <body>
        <p><abbr title="WHO">WHO</abbr> was founded in    1948.</p>
        <p><abbr title="WHO">World People</abbr> was founded in    1948.</p>
        <p title="Free Web tutorials">W3Schools.com</p>
    </body>
</html>
Rohit Sharma
  • 1,271
  • 5
  • 19
  • 37
Jeevan Bhimavarapu
  • 29
  • 1
  • 1
    Based on the current markup you provided, this would not be possible with just CSS. You would either need to modify your markup (to take advantage of a general sibling-type selector) or use JavaScript. – Jack Jun 28 '18 at 03:27
  • You are after the mythical CSS parent selector, at this point in time, no such creature exists – Jon P Jun 28 '18 at 03:31

3 Answers3

1

As far as I know you cannot achieve what you're trying to do with HTML and CSS alone. But if you use JavaScript or jQuery you can easily add colors to the P tag dynamically base on abbr title attribute value.

$(function() {
 $("p").has("abbr[title='WHO']").css("color", "red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><abbr title="WHO">WHO</abbr> was founded in    1948.</p>
<p><abbr title="WHO">World People</abbr> was founded in    1948.</p>
<p><abbr title="WHEN">Sample</abbr> not in red.</p>
JF-Mechs
  • 1,083
  • 10
  • 23
0

Your title is an attribute inside the abbr in the paragraph so you can access it by using the following ways:

1.You can do it with CSS like:

p > abbr[title="WHO"]{
    color: rgb(255,0,0);
}

Here > will select the child element. Tested on jsfiddle.net/3gLcw0mt/

2.Or you can do It with Jquery Jquery:

$("p").has("abbr[title='WHO']").css("color", "rgb(255,0,0)");

Here first, we have selected the p tag then checking the attributes inside it. .css() will allow you to change the value of any CSS property using Jquery

and don't forget to include the Jquery CDN to your file:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
Rajat Jain
  • 1,339
  • 2
  • 16
  • 29
-1
p < abbr[title="who"] {
     * your styling *
}

The < here is a selector and the direction defines the element to be selected. In this case every p element which has a child element abbr with the title "who" will be selected. For more info Google css parent and child selectors

  • Updating my ans *

The above will not work, coz there is no parent selector. But you can still select the child elements using this >. apologize for misleading with my answer. https://jsfiddle.net/fxkbtmjc/

Ranga RS
  • 142
  • 9
  • 2
    Not sure where you came up with _"The < here is a selector and the direction defines the element to be selected. In this case every p element which has a child element abbr with the title "who" will be selected. For more info Google css parent and child selectors"_ but it's wrong. There is no parent or "direction" selector yet. The direct descendant selector is a real thing `>` though, but not `<` – j08691 Jun 28 '18 at 03:26
  • Well I've tired it few times and haven't faced any problems. Maybe my browser versions supported I guess. I'll check again and get back to you on this. Thanks for the info – Ranga RS Jun 28 '18 at 03:28
  • 5
    Yeah you should check on that and get back to us. Maybe with some documentation and examples. – j08691 Jun 28 '18 at 03:29
  • https://css-tricks.com/parent-selectors-in-css/ – Jon P Jun 28 '18 at 03:32
  • 1
    @j08691 when one doesnt remember what once learned, this `<` already exists LOL – NullPoiиteя Jun 28 '18 at 03:36
  • 1
    Nope: http://jsfiddle.net/13krq7w8/ . Tested Chrome 67, Firefox 60, Edge 42, IE 11. All windows. Please at least test your solutions or provide completed examples. – Jon P Jun 28 '18 at 03:42
  • 1
    Your answer is wrong. – Rajat Jain Jun 28 '18 at 03:51
  • @j08691 yes you are right! the > selector works but not the < selector. I have been using > this for a while and I thot this < will also work. My bad, I apologize for my mistake and thanks for pointing it out. – Ranga RS Jun 28 '18 at 07:29