Forums

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

Home Forums CSS need help on selectors

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #35466
    cssnew
    Member

    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 first

    using the :before pseudo element.



    About



    Quick Info


    Hi, I'm Francis.


    I am a passionate.....



    .....


    Thank you.

    #91894
    chrisburton
    Participant

    Before someone gives you an answer, why do you think :before would work? What do you think :before does exactly?

    #91898
    cssnew
    Member

    @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.

    #91900
    chrisburton
    Participant

    I think the best option would be to use the figure and figcaption elements.

    #91902

    See this fiddle: http://jsfiddle.net/sl1dr/gG7qM/

    By the way, I agree with @ChristopherBurton, why exactly can’t you change the markup?

    #91909
    cssnew
    Member

    I 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.

    #91937
    chrisburton
    Participant

    @cssnew Nothing would be empty.



    Your text here...

    #91941

    @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.

    #91943
    chrisburton
    Participant

    You can’t? IMG Tag Sprites

    #91944

    @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!

    #91948
    cssnew
    Member

    @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.

    #91949
    chrisburton
    Participant

    @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.

    #91968
    cssnew
    Member

    @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.

    #91969
    chrisburton
    Participant

    @cssnew If you’re using an image sprite, go with the class.

    #91970
    cssnew
    Member

    Thanks

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