- This topic is empty.
-
AuthorPosts
-
December 5, 2011 at 2:32 am #35466cssnewMember
Hello I’ve been trying my best but still cannot select the first
without using ID or CLASS. Please help.
I’ve been playin’ around with the pseudo selectors all day. LOL. and still haven’t figured it out.
I’d like to insert an image in the firstusing the :before pseudo element.
About
Quick Info
Hi, I'm Francis.
I am a passionate.....
.....
Thank you.
December 5, 2011 at 2:36 am #91894chrisburtonParticipantBefore someone gives you an answer, why do you think :before would work? What do you think :before does exactly?
December 5, 2011 at 2:53 am #91898cssnewMember@chris
Well I’d like to avoid using ID’s, classes or extra markup just to insert this image and using the :before could be a way of achieving it.
BTW, the image is on a sprite.
But if this isn’t the best way to do it, I would be very happy if you could teach me. Thanks.
@Hompimpa
I’ve tried that but still doesn’t work.December 5, 2011 at 3:27 am #91900chrisburtonParticipantI think the best option would be to use the figure and figcaption elements.
December 5, 2011 at 6:03 am #91902joshuanhibbertMemberSee this fiddle: http://jsfiddle.net/sl1dr/gG7qM/
By the way, I agree with @ChristopherBurton, why exactly can’t you change the markup?
December 5, 2011 at 8:39 am #91909cssnewMemberI didn’t say that I don’t like to change the markup. But since the image I want to insert is on a sprite image, I’m thinking that I’ll just use the :before pseudo on my
p
tag rather than adding an extra empty html tag and setting the background to that image.
Thank you.Oh your demo works fine. I didn’t expect it to be too complicated. I have yet to learn.
Thanks again.December 5, 2011 at 3:00 pm #91937chrisburtonParticipant@cssnew Nothing would be empty.
December 5, 2011 at 4:51 pm #91941joshuanhibbertMember@cssnew Ok, that makes sense to me. Wouldn’t it be nice if you could use the img tag for sprites! The other option is just to use padding on the appropriate element and use background-image without the need for a pseudo-element.
Still unsure why you can’t target the paragraph with a class though? It would be much more efficient.
December 5, 2011 at 5:32 pm #91943chrisburtonParticipantYou can’t? IMG Tag Sprites
December 5, 2011 at 5:57 pm #91944joshuanhibbertMember@ChristopherBurton Perhaps I should have been more specific; wouldn’t it be nice if you could use the img tag for sprites without the need for an extra element!
December 5, 2011 at 6:21 pm #91948cssnewMember@ChristopherBurton Ok, I get it now. I didn’t know I could use IMG tag for sprites. Very useful link there. Thank you.
@joshuanhibbert Yes at first I went for a class but then again I remembered Chris Coyier’s advice in most of his videos and post, try to avoid using ID’s and CLASSes and even extra markups just for decorations specially for a very small project like this.Anyways, I’m getting it now. I have leaned another trick again. Thanks to you guys.
Merry Christmas.December 5, 2011 at 6:24 pm #91949chrisburtonParticipant@cssnew I wasn’t recommending it. I think what Chris meant is to avoid using too many ID’s or Classes. Essentially it is bad practice to use a class for EVERYTHING. What you’re doing is perfectly fine using a class.
December 5, 2011 at 11:40 pm #91968cssnewMember@ChristopherBurton Ok, final uqestion. Which way will I go? Add a class and use the :before pseudo element or simply use the IMG tag?
Thanks.December 5, 2011 at 11:44 pm #91969chrisburtonParticipant@cssnew If you’re using an image sprite, go with the class.
December 5, 2011 at 11:51 pm #91970cssnewMemberThanks
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.