CODEWITHSUNDEEP
csscss-selectors
seven
seven

Reputation: 146

What is the main difference between these two ids?

What is the difference between these two ids?

p#id1 { code goes here } and
#id1 p { code goes here }

Upvotes: 1

Views: 70

Answers (4)

imGaurav
imGaurav

Reputation: 1053

  1. Writing #id1 p you are selecting p element which are inside of #id1
  2. Writing p#id1 you are selecting p tag with id #id1 but since id's are unique you don't need to specify it with tag in this case you can write as simple as #id1{ your style }.

Upvotes: 0

Sarath Kumar
Sarath Kumar

Reputation: 2353

p#id1 will select all the p tag in page having ID specified ie.<p id="id1">

#id1 p will select the p as child element of ID specified ie.<div id="#id1"><p> </p></div>

Upvotes: 2

Richa
Richa

Reputation: 4270

p#id1 { code goes here } This will target any p tag with id="id1"

<p id="id1"></p>

and

#id1 p { code goes here } This will target p tag inside id="id1"

<div id="id1"> <p> </p> </div>

Upvotes: 4

Manwal
Manwal

Reputation: 23816

  1. p#id1 will select <p id="id1">

  2. #id1 p will select <div id="#id1"><p></p></div> Inner p element

So both is selecting p element but different p element:

First: p#id1 Will select p having ID id1 because there is no space between them.

Second: Will select child p element of ID id1

See it in action:

p#id1{ color: red;}
#id1 p{ color: green;}
<p id="id1">I am with having id id1</p>
<div id="id1"><p>I am child element</p></div>

Upvotes: 2

Related Questions