How can I apply a style only to one or the other <p>?

Question

I have a problem that is apparently simple but because of my lack of experience I am getting screwed. The thing is, I’m doing a database listing of a text, and this text already comes with the tags <p></p> together. This information has been registered using Tinymce and it has the option to put media in the background, but this media comes in a style="background: url('url da imagem')" and it comes inside my tag <p>. Hence I need to do a style configuration with css but I can’t just affect the tag that contains the style with the background. I tried using jquery addClass and it worked but only if I click on <p>.

--- HTML ----

<p>texto</p>
<p sytle="background: url('exemplo.com')"></p>
<p>outro texto</p>

--- Jquery ---

$(document).ready(function(){
    $('p').click(function(){
        $(this).addClass('teste')
     });
});

---- CSS ---

.teste{
   height: 500px
}

Answer 1

I’m not sure I understand the problem, but it seems to me you have a hard time catching an element that has the style="background: url('url da imagem')", is not?

I tried to play your problem on this one Fiddle

HTML

<p>texto</p>
<p style="background:yellow">segundo texto</p>
<p>outro texto</p>

Javascript

var list = document.getElementsByTagName("p");
for(var i = 0; i < list.length; i++)
{
 if(list[i].style.background == 'yellow')
 {
  alert("sim");
     //Função que quiseres fazer caso tenha aquele estilo
 }
 else
 {
    alert("no");
     //Função que quiseres fazer caso não tenha aquele estilo
 }
}

P.S. I put a color instead of a url just for test purposes, but I believe it still works, you just have to change the value of the if

I hope I’ve helped

Answer 2

    .azul{
    color:blue
    }
    .vermelho{
    color:red
    }

<p class='vermelho'>teste</p>
<p class='azul'>teste</p>