CSS or JS selector

Asked

Viewed 118 times

1

I have a paragraph with no id that I need to style. Styling can only occur for this paragraph. Example:

<p>Conteúdo</p>

So I want to apply CSS only to it.

seletor {estilo;}

Note: I cannot add an id to "p".

html css

  • Is this a programming problem or a real case? how many <p> you have on the page and what is the structure of the HTML around?

  • It’s like a signature. It appears on several pages. I thought about using the selector in tag order, like "div p a {foo;}", but it doesn’t, because it appears in different structures.

  • And it’s just <p> with no attribute?

  • It has a text-align:center, but is very vague.

  • Please put the HTML of this p, its contents and possible superior/ancestral elements that are always equal.

  • I guess there’s always div p

  • I think you’ll be left with no answer because there are no details to answer...

  • I’ll try with jQuery. I thought there was a way to select by content from within HTML and use CSS. Thanks!

  • Yeah, maybe, but you didn’t even share that content with us so we can’t guess.

  • I didn’t think it was relevant. Here is the content: <p>Powered by <a href="www.whmcmcompletesolutionwith">Whmcompletesolution</a>. </p>

  • If it is the case to add a style for all "<p>" that are signature, why not put a "class" in them?

  • And what’s wrong with creating a class?

Show 7 more comments

3 answers

5


To style with Javascript you can select the anchor with [href="www.whmcs.com"].

Example:

var a = document.querySelector('[href="www.whmcs.com"]');
var p = a.parentElement;

p.style.backgroundColor = '#ddf';
p.style.padding = '5px';
<p>Algo...</p>
<p>Powered by <a href="www.whmcs.com">WHMCompleteSolution</a>.</p> 
<p>Algo...</p>

0

try to catch the parent selector of this p for example:

#meu_id p{}

Or maybe pick by index

p:nth-child(1){}

  • html structure changes depending on page.

  • I thought I could select by innerHTML.

  • have how to post more or less how is getting your html?

  • Maybe I should have explained earlier: I use WHMCS, and I can’t remove his signature. It’s bothering me. I’ve read a lot of tutorials, but it doesn’t work. So I thought to remove with CSS.

  • a if it is the case try to use js even, take the container where the P is inside and check the childNodes, try to get the p needed by childNode, if you are using jQuery you can try to get the p according to the text that is inside the p using contains. Well those are my ideas I hope you helped, good luck!!

  • I’m going to research this in jQuery. It’s what I wanted to do with CSS. But if it doesn’t go jQuery even. Thanks man!

Show 1 more comment

0

If this paragraph is unique I see no harm in simply using a class, after all it is Even though they exist, there is no reason to create a complex selector or use Javascript, just do something like:

.powerdby {
    color: #f00; /* é apenas um exemplo */
}
<p>Oi</p>

<p class="powerdby">
Powered by <a href="www.whmcs.com">WHMCompleteSolution</a>.
</p>

<p>Tchau</p>

Note: to style links it is necessary to apply a selector as .poweredby a { ... }, because colors and underscores are not affected by inheritance, not even with !important

  • I didn’t find the file containing html. I just found the CSS file which is easier to find. So I would have to select alternatively.

  • @genesisWP did not understand

  • To add a class to the <p> I need to edit the file that contains the information. I just don’t know where that file is.

  • 1

    @genesisWP this is at least strange, you do not know or do not understand the server structure?

  • It’s the WHMCS. I really don’t understand WHMCS.

  • @genesisWP understand, I’ll take a look at this and warn you

Show 1 more comment

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.