How To Change Only One Paragraph's Color In CSS?

Question

I Was Using The p{} Function To Color In Paragraphs But I Wanted The Other Paragraph To Have Another Color, Like I Wanted 1 Paragraph To Be Green And The Other To Be Blue

I tried To Search It Up On Google And Here But I Couldn't Find A Answer So It Would Be Really Helpful If I Could (And Also I Want The Code To Only Be In CSS Not HTML)

Does this answer your question? [CSS selector for first element with class](https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class)... moreover, you could style rest of the elements by combining the :not operator. — 31piy, Dec 12 '22 at 03:09
CSS classes are how you'd normally achieve this. As you've given us very little to work with it is hard to give advice for your specific problem. Please provide an example of your HTML and what you have tried so far. Also indicate what makes the `
` tag you wish to target different that the rest. — Jon P, Dec 12 '22 at 03:33

Pandas Are Cool · Answer 1 · 2022-12-12T03:25:31.793

You can use an ID. This lets you select one HTML tag, and not all others.

In the HTML file, add an ID with id="id-name". Example:

<p id="lorem-ipsum">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

Now, in the CSS file, you can select the ID. Example:

#lorem-ipsum {
  color: green;
}

You can only use ID's once though, so you can't have multiple paragraphs with the same ID. If you want to have multiple paragraphs with the same "ID" you can use classes. So it would be like this:

.red-paragraph {
  color: red;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p class="red-paragraph">First paragraph</p>
    <p class="red-paragraph">Second paragraph</p>
    <p>Third paragraph</p>
    <script src="index.js"></script>
  </body>
</html>

score 0 · Answer 2 · answered Dec 12 '22 at 03:24

Ids are very useful for targeting specific elements on your page. In any tag, you can use the id attribute to target that specific element in CSS.

If you want to target a couple of elements the same way, use the class attribute instead.

#idtest{color:blue;}
.classtest{color:red};

<p id="idtest">Paragraph goes here...</p>
<p class="classtest">A second paragraph...</p>
<p class="classtest">A third paragraph...</p>

score 0 · Answer 3 · answered Dec 12 '22 at 03:25

You could do it a few different ways. You could give the paragraphs separate classes or IDs, and then associate styles with a different font-color attribute for each. Here's an example using classes:

<html>
    <head>
        <title>Green/Blue Demo</title>
        <style type="text/css">
            .green {
                color: green;
            }
            .blue {
                color: blue;
            }
        </style>
    </head>
    <body>
        <p class="green">
            This is some green text.
        </p>
        <p class="blue">
            This is some blue text.
        </p>
    </body>
</html>

score 0 · Accepted Answer · answered Dec 12 '22 at 03:29

CSS combination! I mean combinator in CSS will help you to figure out the desired result.

Descendant Selector

Match all the elements that are descendent of a specified element.

div p {background-color:blue;}

Child Selector

Select all elements that are children of a specified element.

div > p {background-color: blue;

Adjacent sibling selector

Select all elements that are directly after another specific element. The adjacent sibling element must have the same parent element.

div + p {background-color:blue;}

General sibling selector

Select all elements that are next sibling elements must have the same parent element

div ~ p {background-color:blue;}