• Hi there,

    i’m trying to target spans inside a p element. This is the case:

    my .p has a margin-top of 0.313em.

    my custom styles (created with TinyMCE) are placed in a span within the p tags. But I want my custom style custom-green-title to have a different margin-top.

    So I have to target a span within a p tag. How to I do that? I’ve tried a number of things:

    custom-green-title.p {custom:style;}
    .p, custom-green-title {custom:style;}
    p custom-green-titele {custom:style;}
    And a lot more

    AAAAAh. I can’t get it to work, can you? 😉

Viewing 11 replies - 1 through 11 (of 11 total)
  • Well.. if it’s a unique class, could just do:

    .custom-green-title {
    (style);
    }

    Then it will work with any tag anywhere.

    To target a span inside a p specifically, I think this would work:

    p span.custom-green-title {
    (style);
    }

    Thread Starter jorrit91

    (@jorrit91)

    I have no idea why, but it doesn’t work…

    Link to a post where you are trying to do this would help then we use a brower’s Inspect Element to see what CSS is being used.

    Thread Starter jorrit91

    (@jorrit91)

    Yeah, sorry, it’s really frustrating:

    This is the page:
    http://cloudi.deontwerpsmid.nl/title_tinymce_editor/

    And something is wrapping all my custom styles (eerste-grijze-titel, groen-titel en ondertitel-vet) in one <p>. So I can’t customize the margins for the different styles, I actually want to style the text as this page:

    http://cloudi.deontwerpsmid.nl/wat-is-cloudi/

    You see it’s pretty much the same, but it’s not as neatly lined as the upper link. Thanks for your help already Mark!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Where are you putting the CSS?

    Thread Starter jorrit91

    (@jorrit91)

    In the style.css of my child theme.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I looked there and couldn’t see Mark’s suggested CSS: http://cloudi.deontwerpsmid.nl/wp-content/themes/x-child/style.css?ver=4.0.7

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What style specifically doesn’t work?

    Well, here’s what I see:

    <p><span class="small_main_head eerste-grijze-titel">wat is&nbsp;</span><br>
    <span class="green_title groen-titel">cloudi?</span><br>
    <span class="ondertitel-vet">Cloudi is sterk in vrijwel alle ondernemerszaken. En om het u makkelijk te maken, bundelen wij ze voor u in één compleet pakket. Accountancy, verzekeringen, juridische zaken… Alle dienstverleners waar u als hoofdkantoor of ondernemer dagelijks mee te maken heeft samen op één plek. Verbonden om optimaal samen te werken. Voor u.<br>
    </span></p>

    Each span class can have it’s own margin-left value; otherwise, need to make each its own paragraph. Or you can add display: block; to each span class to make the span act like a <div> more or less and then margin-top and bottom will work.

    Thread Starter jorrit91

    (@jorrit91)

    I have tried Mark’s suggested CSS, but it didn’t do anything… Most of my custom style works, like setting the type to bold.
    But when I try to add a margin-top, I think it conflicts with its parent <p>. In my css you can see
    margin-top:80px!important;
    Not that I need that amount, but just to test it. Right under there I set the text to bold. The bold text is presented, but the the margin doesn’t do anything.

    Thread Starter jorrit91

    (@jorrit91)

    YEAH!
    MARK!
    that’s it!
    Just tried adding the display:block, and it works exactly as I need it to! Thank you so much!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Targetting spans inside elements’ is closed to new replies.