Replace Span on Paragraph with CSS

[pittles78]

On this page shown here:

http://superluxefibers.com/services/relabel/

I have used span on the top paragraph to increase text size. I know that there is paragraph CSS telling it to be default size that the span is overriding. What I would like to do is have a selector of some sort that is specific to certain paragraphs.

Basically leaving the default text size of paragraph, but adding a separate size that I can universally call upon to replace always using span.

I’m sure this is pretty elementary, but I can’t figure it out.

Best,
Jon

[TheDoc]

You could do something like:

p:first-child {
    font-size: /* whatever */;
}

But you’d probably have to be more specific than that, because you likely don’t want to target all of the paragraphs throughout the site.

[pittles78]

Great, so what exactly would the html look like for that css?

[pittles78]

<

p class=”first child> ???

[TheDoc]

Your HTML wouldn’t change at all. You could just get rid of your .

Codepen: http://codepen.io/ggilmore/pen/c79f7b3f006a3cfdc7358b7cb87192b3

[TheDoc]

Ugh. The markup isn’t rendering properly in the forum. I’ll post to Codepen.

[pittles78]

Ok thank you so much.

[pittles78]

I am using shortcodes for the page formatting and the div inside the shortcode doesn’t render properly. Any tips?

Here is what I have on the WordPress side:

<h1>Relabel Printing</h1>

\[full_width_section bg_pos="Left Top" bg_repeat="No-Repeat" text_color="Dark" image_url="" top_padding="40" bottom_padding="40" background_color=""\] \[one_half\]

If you are really trying to “go there” with your branding, then custom relabel prints are whats up. Your single color tag gets printed with all of the necessary legal info and then we’ll cut out the existing manufacturer’s tag. On some occasions, custom relabel projects can add to our typical turnaround time, but we’ll let you know up front.

Your tags get printed with the minimum amount of ink for softness and to prevent the ink from bleeding through to the back. Regardless, you can always see something printed on the inside of a sheer lightweight, light colored tee. Just saying.

[/one_half]

[one_half_last] [][1]

[/one_half_last]

[/full_width_section]

 [1]: http://superluxefibers.com/wp-content/uploads/2013/07/tuff-relabel.jpg

[Alen]

I am using shortcodes for the page formatting

Why?

and the div inside the shortcode doesn’t render properly. Any tips?

Show us the function that renders this shortcode?

[pittles78]

The div does work with the shortcode after all. I was mistaken. It is functioning properly now.

[Martin Duran]

While I absolutely adore selectors, particularly first-child, because it’s supports down to ie7, I wouldn’t suggest using it, unless you plan on only changing style for the paragraph of your parent div. Instead, I’d recommend you define styles for the strong tag and use it when you want your paragraph to inherit larger font-size, or whatever styles you declare. I understand this to be your best option, as you can declare these styles whenever you choose, whereas first-child is selective.

[pittles78]

Hi Martin,

That is basically what I ended up doing. Just not with strong. I made a class called .bigger-text that I can use when I need. Is there an advantage to using strong?

[Martin Duran]

pittles,

Not necessary, but, whenever I can, I avoid creating unnecessary classes. Considering HTML provides a great set of tags, I hardly find the need to create classes anymore, especially since my adoption of SCSS. Personally, I think classless code makes for cleaner code.

[Author]

Posts