CODEWITHSUNDEEP
css
Magiranu
Magiranu

Reputation: 309

ID-Selector in combination with Class-Selector not working

I'm not able to use an ID-selctor in combination with a class-selector. It baffles me as I also used a CSS Validator to check for erors. So, why is only the latter working in my code?

This is my Code:

#result .red1 {
	color: #FF0000;
}

.red2 {
	color: #FF0000;
}
<span id="result" class="red1">Test of Color</span>
<br>
<span id="result" class="red2">Test of Color</span>

Upvotes: 1

Views: 1467

Answers (7)

Amit Jain
Amit Jain

Reputation: 11

#result.red1 {
	color: #FF0000;
}

.red2 {
	color: #FF0000;
}
<span id="result" class="red1">Test of Color</span>
<br>
<span id="result" class="red2">Test of Color</span>

Upvotes: 1

Ehsan
Ehsan

Reputation: 12951

#result .red1 selects all elements with class red1 inside element with id result.

For example :

<span id="result">
  <span class="red1">Selected</span>
</span>

#result.red1 selects element that have id result and class red1.

For example : your case.

So, for fix your problem, remove the space between the #result and the .red1

#result.red1 {
  color: #FF0000;
}


 #result.red1 {
  color: #FF0000;
}

.red2 {
  color: #FF0000;
}
<span id="result" class="red1">Test of Color</span>
<br>
<span id="result" class="red2">Test of Color</span>

Upvotes: 1

Heinrich
Heinrich

Reputation: 820

Note that spaces have a special semantic in CSS selectors. The way you wrote it says "look for an element with id="result", with an element of class="red1" inside (see the third "Test of Color" line below).

If you want both selectors to refer to the same element, you have to omit the space, i.e. write #result.red1 or .red1#result.

Also, do not use duplicate IDs in the html code.

#result1.red1 {
	color: #FF0000;
}

.red2 {
	color: #FF6600;
}

#result3 .red3 {
	color: #FF0066;
}
<span id="result1" class="red1">Test of Color</span>
<br>
<span id="result2" class="red2">Test of Color</span>
<br>
<span id="result3"><span class="red3">Test of Color</span></span>

Upvotes: 1

Adam Christopher
Adam Christopher

Reputation: 76

Remove the space between the ID and the class selector 

#result.red1 {
  color: #FF0000;
}

"#result .red1" means find the class red1 INSIDE the result element. It is better not to use ID as CSS selectors though.

Upvotes: 1

kravisingh
kravisingh

Reputation: 1660

To use combination of class with id remove the space. Also don't use duplicate id.

#result.red1 {
	color: #FF0000;
}

.red2 {
	color: #FF0000;
}
<span id="result" class="red1">Test of Color</span>
<br>
<span id="result" class="red2">Test of Color</span>

Upvotes: 1

ankita patel
ankita patel

Reputation: 4251

Your code is not working because you put a space between #result and red1.

#result.red1 {
	color: #FF0000;
}

.red2 {
	color: #FF0000;
}
<span id="result" class="red1">Test of Color</span>
<br>
<span id="result" class="red2">Test of Color</span>

Upvotes: 1

Kev
Kev

Reputation: 5442

Your selector is wrong. You have the id and the class on the same element.

You should not put a space, like this: #result.red1

The space means that the element that has class red1 must be a descendant of an element with id result.

Upvotes: 1

Related Questions