CSS3 selectors p.para vs. p .para

Question

I read the following, but I don;t fully understand the meaning of these selectors. Could you please provide an example showing the difference between them? Thx.

This is one of the most basic concepts in CSS. If you look up any guide or lesson on CSS selectors you'll find this explained. — Bram Vanroy, Sep 05 '17 at 11:25
@Quentin: I imagine he assumes 3 is part of the technology name, and not a version number. As most people new to web development do. — BoltClock, Sep 05 '17 at 11:30
@BramVanroy, the topic on selectors is found in many references. However, not every reference list all possible example. I have checked several references and found no example for this case. — NoChance, Sep 05 '17 at 11:51
@Quentin, is there a new implementation for this case in CSS3? — NoChance, Sep 05 '17 at 11:52
@NoChance — No. The implementation of descendant combinators has remained unchanged (although their name has changed). — Quentin, Sep 05 '17 at 12:11
@NoChance — The official spec has an example for that case: https://www.w3.org/TR/css3-selectors/#descendant-combinators — Quentin, Sep 05 '17 at 12:12
A class selector and a descendant selector are found in any basic CSS reference... As Quentin rightfully pointed out, you can also find an overview of all selectors in the spec. — Bram Vanroy, Sep 05 '17 at 12:25
@BramVanroy, thanks for pointing the duplicate, (although it is not exact duplicate), — NoChance, Sep 05 '17 at 12:32

Ahmet Karabulut · Answer 1 · 2017-09-06T14:02:44.127

-1

P{
  border: 1px solid black;
  width: 100px;
}
P.para {
  color: red;
  }
P .para {
  color: blue;
}

<p class="para"> <!--P tag with class para-->
  sth
</p>
    
<p> <!--P with child having class para-->
  <span class="para"> 
    sth
  </span>
  xyz <!-- xyz is element of p -->
</p> <!--Or any descendant not just children-->

Both "sth" will change with any css rule but "xyz" is not.

edited Sep 06 '17 at 14:02

answered Sep 05 '17 at 11:25

Ahmet Karabulut

153
1
12

1

It's any descendant, not just children. – Quentin Sep 05 '17 at 11:29
"P with child having class para" — It selects the descendant, not the paragraph itself. – Quentin Sep 05 '17 at 11:31
Thanks for warning. – Ahmet Karabulut Sep 05 '17 at 11:35
Your example is a bit difficult to follow though. Thx. – NoChance Sep 05 '17 at 12:04
@NoChance okay i try my best :) – Ahmet Karabulut Sep 05 '17 at 12:07
Now it is more clear. Thx. – NoChance Sep 05 '17 at 12:11
@NoChance I think now it is more clear. – Ahmet Karabulut Sep 06 '17 at 14:03

DjaouadNM · Accepted Answer · 2017-09-11T22:28:53.647

-1

p.para { /* <p class="para">, similar to p[class="para"] */
   color:red;
}

p .para { /* any descendants, that have class="para", of <p> */
   color:blue;
}

<p class="para">
  P.Para {}
</p>

<p>
  <span class="para">
     P .Para {}
  </span>
</p>

edited Sep 11 '17 at 22:28

answered Sep 05 '17 at 11:26

DjaouadNM

22,013
4
33
55

1

It's any descendant, not just children. – Quentin Sep 05 '17 at 11:29
"any `
` with child that has class="para" */" — No. It selects the descendant, not the paragraph itself.
– Quentin Sep 05 '17 at 11:30
@Quentin you're right I lost terminology, thanks. – DjaouadNM Sep 05 '17 at 11:33
"any descendants of `
` that have class="para"" — That's ambiguous. It's "any descendants, that have class="para", of `
`"
– Quentin Sep 05 '17 at 11:33
@Quentin Corrected. – DjaouadNM Sep 05 '17 at 11:35

CSS3 selectors p.para vs. p .para

2 Answers2