-3

The task was to set red color to all paragraphs in the class standart

I did it this way

.standart p { color:red; }

but I was told it's bad solution and this is the "good one"

p.standart { color:red; }

What's the difference between these two?

P. Bolfa
  • 99
  • 1
  • 7
  • Take a look at [CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). The first is a [*descendant combinator*](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators). – Tyler Roper Jan 07 '20 at 18:25
  • 1
    If you don’t appreciate the difference please take the time to read about [CSS selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors). – David Thomas Jan 07 '20 at 18:27

3 Answers3

3

.standart p { color:red; }
p.standart { color:red; }
<div class="standart">
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>
<hr/>
<p class="standart">One 1</p>
<p class="standart">Two 2</p>
<p class="standart">Three 3</p>

.standart p { color:red; } means you want red color text for all paragraphs inside standart class.

p.standart { color:red; } means you want red color text for all paragraphs having standart class.

Kumar Gaurav
  • 738
  • 4
  • 11
1

It depends. The first one matches each <p> element descendant of an element with the standard class (for example: <div class="standard"><p> ), whereas the second one matches all <p> elements with class standard ( <p class='standard'> ). None of them is incorrect, depends on what you need.

jeprubio
  • 17,312
  • 5
  • 45
  • 56
  • Oh I see, but if the task was given like that then I completed the task or not? – P. Bolfa Jan 07 '20 at 18:28
  • @P.Bolfa What?? – Libra Jan 07 '20 at 18:30
  • In that task only the second one is correct – jeprubio Jan 07 '20 at 18:32
  • If the task says "Set red color to all paragraphs inside the class standart then ```.standart p``` will work just fine? – P. Bolfa Jan 07 '20 at 18:32
  • Sorry, I misread your previous comment, if the task had been to set red all the paragaphs inside an element with class standard then the `.standard p` would have been correct. It's also fair to say Kumar Gaurav gave you the best answer, you could mark his answer as correct. – jeprubio Jan 08 '20 at 09:58
0

The difference is below

.standart p { color:red; } - it applies on all paragraph text inside the standard class. p.standart { color:red; } - it applies on all paragraphs text which having the standard class.

Hitesh Kumar
  • 383
  • 2
  • 6