HTML, CSS and anything else that deals with client side capabilities.
Moderator: General Moderators
simonmlewis
DevNet Master
Posts: 4435 Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:
Post
by simonmlewis » Fri Feb 26, 2016 5:01 am
Hi
So I have a simple bit of HTML. I have the H3 set just so, but I want to custom each of the two H3 tags to have set colors.
Code: Select all
<div class='mobile-bullets'>
<h3 class='smile'>What instant benefits ?</h3>
</div>
<div class='mobile-bullets'>
<h3 class='sad'>What instant downfalls?</h3>
</div>
I thought it would be like this:
Code: Select all
.mobile-bullets h3
{
margin: 0px;
font-family: Titillium Web, SegoeUILightWF;
font-weight: 600;
font-size: 25px;
border-bottom: 1px solid #cccccc;
padding-bottom: 10px;
margin-bottom: 10px;
color: #422782;
}
.mobile-bullets sad h3
{
color: #ff0000;
}
.mobile-bullets smile h3
{
color: #009900;
}
But it doesn't work.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
requinix
Spammer :|
Posts: 6617 Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA
Post
by requinix » Fri Feb 26, 2016 5:41 am
What kind of element does ".mobile-bullets" apply to? What kind of element does "h3" apply to?
simonmlewis
DevNet Master
Posts: 4435 Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:
Post
by simonmlewis » Fri Feb 26, 2016 5:51 am
.mobile-bullets is a DIV.
H3 is just wrapped around the title text within the DIV.
There are just <ul><li></li></ul> tags inside the DIV, and one image.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
requinix
Spammer :|
Posts: 6617 Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA
Post
by requinix » Fri Feb 26, 2016 8:30 am
I meant technically, as in "technically, '.mobile-bullets' is anything that has a class of 'mobile-bullets'" and "technically, 'h3' is any <h3>".
That would then trigger the thought "so that means that, technically, '.mobile-bullets sad h3' would target a <h3> within a <sad> within anything with a class of 'mobile-bullets'". Which is clearly not what you want.
Then you'd think "if I want to target a h3 with a class of 'smile' within something with a class of 'mobile-bullets' then I should use '.mobile-bullets h3.sad'".
simonmlewis
DevNet Master
Posts: 4435 Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:
Post
by simonmlewis » Fri Feb 26, 2016 11:25 am
That's it - you got it. That last statement you made was it.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.