Change CSS in element that contains certain text

Question

I have the code to follow, where my intent is that where in the class .breadcrumb a appear the term "biblical", this class has its style changed only where the resolution is less than 320px, but so far it has not worked. What could be wrong, guys? Thanks in advance!

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

Answer 1

I don’t see why use jQuery to do this if only with CSS you would solve.

But that way you 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>

        <a href="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>

<a href="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>