How to make a class override an element CSS style?-CodePudding

Below is my CSS and HTML code respectively. I want all paragraphs to be black font except for one group of three. I know that I could give each of these three paragraphs their own class but I would prefer if there was a way to change all of them at once. I thought that wrapping them in a div tag and giving that div tag the ".special-paragraphs" class would work but it doesn't. Is there any way to do this or am I forced to edit each paragraph individually?

p { 
  color: black; 
}

.special-paragraphs {
  color: chartreuse;
  background-color: pink;
  font-family: Arial, Helvetica, sans-serif;
}

  <div >
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>
      Quo, quaerat repudiandae ad culpa minus repellat dolore, possimus <br>
      nemo qui sunt voluptas architecto iure accusantium nihil pariatur <br>
      dolores debitis error asperiores.</p>
    <p>Amet perspiciatis, cupiditate illo pariatur rem quasi ab <br>
      reprehenderit? Ex nisi consectetur possimus, corrupti voluptates <br>
      ullam, quod accusamus id iure quas consequuntur? Obcaecati aspernatur <br>
      minima, temporibus ea sed totam adipisci!</p>
    <p>Ipsa odit aut dicta perspiciatis vero commodi sequi reiciendis. <br>
      Eum fugit sapiente blanditiis non quisquam veniam harum iusto! Ex, <br>
      at. Laboriosam iusto provident consequuntur ab necessitatibus deserunt <br>
      ducimus, fugit fuga!</p>
  </div>

CodePudding user response：

you can use

<p style="color:black">

...it's not the better, but works

CodePudding user response：

try add !important :

    .special-paragraphs {
      color: chartreuse !important;
      background-color: pink;
      font-family: Arial, Helvetica, sans-serif;
    }

CodePudding user response：

You don't need to give the style for default P element. Because it will overwrite all the P elements. So you have to add the style for special-paragraphs only. It will work.

.special-paragraphs
{
  color: chartreuse;
  background-color: pink;
  font-family: Arial, Helvetica, sans-serif;
}

<p>I am normal</p>
<div >
<p>I am red</p>
<p>I am blue</p>
<p>I am green</p>
<div>