Home>

HTML:

<
body >
<
h1 align= "center" >
HTML Code Example <
/h1 >
 <
div >
  <
h4 class= "title" >
Example Title <
h4 >
  <
span >
Blah blah blah <
span >
  <
span class= "general-buttons" onclick= "deletePost ();" >
(Delete) <
span >
  <
span align= "right" class= "general-buttons" onclick= "window.history.back ();" >
[Back] <
/span >
 <
/div >
<
/body >

I did not find any information on this on the Internet (I was looking only in English), I myself do not know how to change the style of a specific button, so I appeal to the great minds of this site: Is it possible to change the style of the Delete button without affecting other elements using text inside an element? Could this be possible with jQuery or JS (Vanilla)?

  • Answer # 1

    CSS only. Use an attribute selector and set it on the desired unique attribute, which in this example isonclick:

    .general-buttons [onclick ^= "deletePost"] {
      background-color: red;
    } 
    <
    h1 align= "center" >
    HTML Code Example <
    /h1 >
    <
    div >
      <
    h4 class= "title" >
    Example Title <
    /h4 >
      <
    span >
    Blah blah blah <
    span >
      <
    span class= "general-buttons" onclick= "deletePost ();" >
    (Delete) <
    /span >
      <
    span align= "right" class= "general-buttons" onclick= "window.history.back ();" >
    [Back] <
    /span >
    <
    /div >
    

    Thanks of course, but I can do this myself, I wanted to change the CSS exactly through the current text of the element, and not through the attribute, but thanks anyway.

    NNL9932021-12-25 13:32:55
  • Answer # 2

    Styling a specific button can be done using the jQuery command below:$ ("span: contains ('(Deleted)')"). css ('background-color', '# fdd60391');

    CDN jQuery link: https://code.jquery.com/jquery-3.6.0.min.js