Grow your CSS skills. Land your dream job.

P class selector

  • # May 17, 2010 at 5:17 pm

    Using the code further down I am trying use a p class selector with the same properties as the first-letter selector BUT without the first-letter. Specifically, I am referring to the class "reminder" in the attached code.

    I’m not too good at class and id selectors – still find ‘em difficult (must be the age) so would really appreciate your help.

    Thanks

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



    content="text/html; charset=iso-8859-1" />

    Header 4

    Paragraph

    Header 5

    Reminder maybe do a different highlight

    Make the text in footer bold with font-weight.


    and

    Code:
    body {
    /*background-color: #dce7f3;*/
    color: #000000;
    margin:20px;
    padding:0px;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 1.1em;
    background-image: url(images/powered_by.png);
    background-repeat: no-repeat;
    background-position: 97% 80%;
    background-attachment: fixed;

    }

    p {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 1.1em;
    margin:0px 0px 16px 0px;
    padding:0px;
    letter-spacing: 1.2px;
    }

    p.reminder {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 1.1em;
    margin:0px 0px 16px 0px;
    padding:0px;
    letter-spacing: 1.2px;
    color: red;
    }

    div p:first-letter {
    color: #09c;
    font-size: 125%;
    }

    # May 18, 2010 at 7:31 am

    You can use pseudo selectors (:first-letter, :hover, :after etc.) on class/id selectors, eg:

    Code:
    p.reminder:first-letter {
    color: red;
    font-size: 1em;
    }

    This, after your other :first-letter selector, would make it look normal for the .reminder paragraph.

    # May 18, 2010 at 8:48 am

    Thank you TCooper I appreciate your reply.

    This is driving me crazy. I tried your suggestion but still that first letter shows-up and I don’t want the first letter in this specific paragraph.

    For some reason I think the reason this is happening is because of the <div> statement. What do you think?

    I’m going to be bold here, and ask exactly how I would amend the above css and html code – sometimes it is easier for me to follow by example.

    Thanks again. Your time is appreciated.
    jc

    # May 18, 2010 at 9:03 am

    The div (with id body) you are using isn’t strictly doing anything and wouldn’t make a difference if you took it out completely (as long as you remembered to take it out of your css selectors too)

    Just adding what I gave you to the end of your css should remove the different styling from the first letter of the .reminder paragraph. Make sure you aren’t using a cached version of your old css with a hard refresh (ctrl + f5/refresh) or disable your cache.

    Code:
    body {
    /*background-color: #dce7f3;*/
    color: #000000;
    margin:20px;
    padding:0px;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 1.1em;
    background-image: url(images/powered_by.png);
    background-repeat: no-repeat;
    background-position: 97% 80%;
    background-attachment: fixed;

    }

    p {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 1.1em;
    margin:0px 0px 16px 0px;
    padding:0px;
    letter-spacing: 1.2px;
    }

    p.reminder {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 1.1em;
    margin:0px 0px 16px 0px;
    padding:0px;
    letter-spacing: 1.2px;
    color: red;
    }

    div p:first-letter {
    color: #09c;
    font-size: 125%;
    }

    div p.reminder:first-letter {
    color:red;
    font-size:1em;
    }

    # May 18, 2010 at 10:04 am

    Thanks once again.

    I’ve tried it again and my thick skull can’t get it – FOR NOW.
    So I’ve just removed the first:letter selector and will work without them.

    Thanks for your time.
    jc

    # May 18, 2010 at 10:48 am

    A link to the page would be helpful. I’ve tested with the code you posted and it works fine.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".