P class selector

[JCSullivan]

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:

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%;
}

[Tcooper]

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.

[JCSullivan]

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

[Tcooper]

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;
}

[JCSullivan]

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

[Tcooper]

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

[Author]

Posts