Change CSS in element that contains certain text

Question

Change CSS in element that contains certain text

Navigation

#1 by (1 votes)

1

I have the following code, where my intent is that where in class .breadcrumb a the term "biblical" appears, this class has its style changed only where the resolution is less than 320px, but so far did not work. What could be wrong, guys? Thank you in advance!

<script>
if ($(window).width() &lt; 320) {$(".breadcrumb a:contains('bíblicas')").css("background-color", "green");}
</script>

javascript jquery css

asked by anonymous 18.04.2018 / 16:35

1 answer

How to display to admin the data specific to each user chosen with rails Jqgrid put phone masks in column output in JQGRiD?

score 1 · Accepted Answer

I do not see why using jQuery to do this if only with CSS you would solve.

But this way you can get what you want using jQuery.

Option 1

$(window).resize(function(){     
    if ($('body').width() <= 320 ){
        $('a[href*="biblicas"]').css("background-color", "green");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ahref="https://code.jquery.com/jquery-3.2.1.slim.min.biblicas.js">https://code.jquery.com/jquery-3.2.1.slim.min.biblicas.js</a>

Option 2

$('body').append("<style type='text/css'>@media screen and (max-width: 320px) { a[href*='biblicas'] { background-color: green; } }</style>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ahref="https://code.jquery.com/jquery-3.2.1.slim.min.biblicas.js">https://code.jquery.com/jquery-3.2.1.slim.min.biblicas.js</a>