CSS: Class within Class

Question

Created two custom classes with the aim of achieving the below result:

My CSS:

.custom_ccy_pricing {
    font-size:20px;
    top:-35px;
    position:relative;
    color:grey;
}

.custom_pricing {
    font-size:80px;
    font-family: ‘Raleway’;
    float:right;
    color: #7ebec5;
    font-weight:300;
}

My html:

 <div class="custom_ccy_pricing">$
     <div class="custom_pricing">50</div>
 </div>

No matter what, I can't seem to achieve the above - wordpress automatically assigns <p> to the text, as seen below (and what I end up with):

inspect

Result:

result

Thanks!

If there's no way of getting rid of that p tag then you could do: .custom_ccy_pricing p { display: none; } — Matthew Mcveigh
– Matthew Mcveigh, Commented Mar 26, 2014 at 17:47
This is questionable use of a <div>; how about a <span> instead, like <div class="custom_ccy_pricing">$<span class="custom_pricing">50</span></div>, all on one line? — yitwail
– yitwail, Commented Mar 26, 2014 at 17:54
div is a block element, so the p is inserted automatically (I think), you should set the display:inline-block for the div or use span as suggested by yitwail — King King
– King King, Commented Mar 26, 2014 at 17:57
thanks guys, I used span in the div and created a container around it. — Dan
– Dan, Commented Mar 26, 2014 at 18:26

user3463119 · Accepted Answer · 2014-03-27 07:23:00Z

2

Try using <span> instead of <div> for the text.

HTML:

<div class="pricing_holder">
<span class="custom_ccy_pricing">$
<span class="custom_pricing">50</span>
</span>
</div>

CSS:

.custom_ccy_pricing {
font-size:20px;
*top:-35px;
position:relative;
color:grey;
width: 100px;
}

.custom_pricing {
font-size:80px;
font-family: ‘Raleway’;
float:right;
color: #7ebec5;
font-weight:300;
}
.pricing_holder {
width: 100px;
}

I am not sure if it works on wordpress, though.

edited Mar 27, 2014 at 7:23

answered Mar 26, 2014 at 17:57

user3463119

364 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dan Over a year ago

thanks guys! I figured it out - used the above suggestion with a pricing_holder and the span's instead of divs.

user569322 · Accepted Answer · 2014-03-26 17:59:38Z

1

Make this:

<div class="custom_ccy_pricing">$
     <div class="custom_pricing">50</div>
</div>

This:

<div class="custom_ccy_pricing">$
     <span class="custom_pricing">50</span>
</div>

The span tag is specifically for styling text. Each time you make a new div, it makes a linebreak for you, as it is a block element.

span is an inline element, so there is no such linebreak.

answered Mar 26, 2014 at 17:59

user569322

Comments

nydame · Accepted Answer · 2014-03-26 18:40:45Z

You can get rid of the pesky p tags simply by writing the HTML on a single line like so...

<div class="custom_ccy_pricing">$<div class="custom_pricing">50</div></div>

The p tags are not your only problem, however! You also need to keep the number (div.custom_pricing) together with the dollar sign (div.custom_ccy_pricing). You already have some answers that suggest using a span for div.custom_pricing, but that won't work for you if you really need to float it. The only reason for using a span is to enforce display: inline behavior, which is incompatible with floating.

I suggest something altogether different: add the dollar sign as a ::before pseudo-element. Here's how I would do it:

HTML

<div class="custom_pricing">50</div>

CSS

.custom_pricing::before {
color: gray;
content: "$";
font-size: 20px;
font-weight: normal;
position: absolute;
top: -35px; left:0;
}

.custom_pricing {
font-size:80px;
font-family: ‘Raleway’;
float:right;
color: #7ebec5;
font-weight:300;
}

You might want to learn more about the awesomeness of pseudo-elements here: http://css-tricks.com/pseudo-element-roundup/

Collectives™ on Stack Overflow

CSS: Class within Class

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related