Welcome to WebmasterWorld Guest from 3.81.29.226

Forum Moderators: not2easy

Message Too Old, No Replies

How to solve class inside section?

     
4:46 pm on Feb 5, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1108
votes: 1


How is possible that class will not be detected by browser.
<section id="section1" class="mycolour1">

If I add CSS: .mycolour1 it will work but
section#section1 .mycolour1 will not work. how to make it detected?
5:02 pm on Feb 5, 2015 (gmt 0)

Junior Member

5+ Year Member

joined:June 6, 2012
posts: 104
votes: 0


That is because you are implying that the element that has the class mycolour1 is the child of the section element

section.mycolour1 should work fine.
7:13 pm on Feb 5, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1108
votes: 1


How to solve that class="mycolour1" will be applied only to specific ID like. section1 id="section1"?
7:23 pm on Feb 5, 2015 (gmt 0)

Full Member from GB 

10+ Year Member

joined:Oct 16, 2001
posts: 207
votes: 0


#section1.mycolour1 {}

But I'd advise you to stick to using .classes instead of #ids, it will save you specificity issues further down the line.

If you need to be more specific, include a class for .section1.mycolour1 {}
8:15 pm on Feb 5, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15934
votes: 887


How to solve that class="mycolour1" will be applied only to specific ID like. section1 id="section1"?

You don't need to. Just use the id by itself in CSS
#section1


The only exception is if there are pages where an element has this id but not the named class, and you don't want the styling to apply in those cases. That's when you go to justa's double-pronged approach:
#section1.mycolour1


Always remember that in CSS, each space means a new element.

.onething.otherthing

=
<element class = "onething otherthing">

.onething .otherthing

=
<element class = "onething">
{blahblah}
<element class = "otherthing">

Incidentally, is "mycolour1" a real class name, like "class = 'red'" or "class = 'cyan'"? Most of the time this is not the best choice for naming. Otherwise you'll end up, a few redesigns further, with
.red {color: blue;}
.green {color: gray;}

:)