CODEWITHSUNDEEP
htmlcssstyles
nataraj sarath
nataraj sarath

Reputation: 57

Need to apply css to a <p> tag

I have a div class called index and inside that, I have two more div without class or id name and two <p> tags. I want to apply the style for these two <p> tags.

<div class="doubt">
  <div>
    <p>Hello world</p>
    <div>
      <p>Hello</p>
    </div>
  </div>
</div>

How to apply different style for two p tags?

Please help me out from this, Thanks in Advance!

Upvotes: 3

Views: 9662

Answers (4)

Safwan Shaikh
Safwan Shaikh

Reputation: 546

You can use inline styling.

<div class="doubt">
      <div>
        <p style="color: yellow">Hello world</p>
        <div>
          <p style="color: red">Hello</p>
        </div>
      </div>
</div>

as well you you can use hierarchical structure in style to apply styling on these paragraphs.

<head>
    <style>
        .doubt div p{
            color: red;
        }
        .doubt div div p{
            color: green;
        }
    </style>
</head>
<body>
    <div class="doubt">
      <div>
        <p>Hello world</p>
        <div>
          <p>Hello</p>
        </div>
      </div>
    </div>
</body>

hope this will help you.

Upvotes: 1

yakupa
yakupa

Reputation: 11

You can also use inline sytling.

<div class="doubt">
    <div>
        <p style="color: red">Hello world</p>  
        <div>
            <p style="color: green">Hello</p>
        </div>
    </div>
</div>

Upvotes: 0

jaydeep patel
jaydeep patel

Reputation: 917

Simple Just use this css

Let me know any further clearification.

.doubt > div > div > p {
    color: green;
}
.doubt > div > p {
    color: red;
}
<div class="doubt">
    <div>
            <p>Hello world</p>  
        <div>
            <p>Hello</p>
        </div>
    </div>
</div>

Upvotes: 3

Rohit Verma
Rohit Verma

Reputation: 3785

You can apply different style for two p tags like below:-

.doubt div:nth-child(1) p{ color:green;}
.doubt div:nth-child(2) p{ color:red;}
<div class="doubt">
    <div>
            <p>Hello world</p>  
        <div>
            <p>Hello</p>
        </div>
    </div>
</div>

Upvotes: 0

Related Questions