Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Assign class to a specific div element

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #272242
    beginnersmind
    Participant

    Hey,

    Newbie question: I want to assign a border to a specific piece of text on one specific page on my site.

    Unfortunately, I can’t find an individual id for the div element, it’s called “text-content” which applies to all body text.

    Can I give this div a new name and make it specific to the piece of text and then assign a new class to it? Where do I need to go to do that?

    I only know basic CSS, but I don’t know where to assign a class to a div.

    Here’s what it says right now:
    div class=”text-content”

    I need it to say:
    div class=”border-homepage”

    I hope this was clear – can you help me out? Thanks!

    #272282
    tomnoble92
    Participant

    Well it depends on your situation. Do you have access to the main style sheet or is it a wordpress theme. If you post the url we will be able help more.

    #272283
    Paulie_D
    Member

    Classes are “assigned” in the HTML.

    PRovided you have access to that HTML I’d suggest you ADD a class to the text-content div so that it becomes

    <div class="text-content border-homepage">
    
    #272285
    beginnersmind
    Participant

    Here’s my url: http://www.irisbarzen.com/

    It’s a wordpress theme, I do have access to the editor. That’s basically my question, I don’t know where to edit the html. I know that’s a total begginer’s question, but that’s the stuff I find hard to find at Google. :)

    If I use the code you provided, does that mean it would assign text-content the homepage-border class? I don’t want to edit the complete text-content div, since that would change all my body text. If you look at the homepage right now, I just want the paragraphs that start with this text to have a border: “Be productive without beating yourself up – while having enough time to enjoy your life (and start reading fiction again).”

    #272352
    Paulie_D
    Member

    As I said, if you are trying to select a single div generally you need to add a specific identifier in the HTML

    Then that identifier can be used as a selector in the CSS.

    So, if you have access to the HTML you can add an ID or class and then use that to target the CSS rule.

    Other than that we are going to have to get really specific with out CSS selector…let have a look.

    The text you refer to is actually an h3 not a paragraph…and it’s inside the landing-inner div…..but there’s one of those on most of the pages but this one is on the homepage. Fortunately, WP adds a specific class (.home) to those soooo…

    .home .landing-inner h3 {
        border: 2px solid purple;
        padding: 2px; /* a little breathing room */
    }
    

    ..would seem to get us there…but there are a lot of h3 elements in landing-inner divs so we’ll have to get even more specific.

    So, there’s lots of landing-inner divs but this one is specifically the 2nd child of the #main div sooo….

    .home #main :nth-child(2) .landing-inner h3 { /* notice the spaces */
        border: 2px solid purple;
        padding: 4px; /* 4 px looks a little better - but that's a matter of choice */
    }
    

    Phew! :)

    As you can see, accessing the HTML and adding an ID would be much simpler.

    #272353
    beginnersmind
    Participant

    Thank you! I figured out how to edit the HTML. Duh, it was in the HTML/text editor on the individual pages and posts. Now I feel silly for asking.

    But thank you so much for your help, your answer was really well written aka easy to understand step by step. :)

    #272362
    beginnersmind
    Participant

    Okay, now I’m trying to target another div using your method – it’s on a page where I can’t go into the html editor.

    It’s on this page: http://www.irisbarzen.com/coaching/ I’m trying to target the text inside the first text box and change the fonts or make it an h3 instead of an h2.

    Here’s what I’ve tried, what am I missing?

    https://codepen.io/anon/pen/VdmGzJ

    Thanks!

    #272363
    Paulie_D
    Member

    I’d suggest using your Developer Tools to inspect the code.

    That page has a class (added by WP) of .page-id-4061 and go from there.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.