Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    CSS: Target element by style

    Hi guys,

    I have a pretty complex question that I would like to ask you.
    With CSS3, new attribute selectors have been introduced which is very handy. The reference does, however, only explain targeting elements by some attributes that have to be present on the html-tag that should be target.

    What I would like to do is to target an element that has a specific style. For example, IE7 does not support the CSS
    Code:
    inline-block
    -attribute without adding a fix to it. Instead of listing all the instances that use inline-block and target the fix to them, I would like to do it automaticly by targeting all instances that have the inline-block attribute. In that way, whenever I introduce a new element with an inline-block attribute it would apply the fix automaticly without me having to enter the CSS and add the class name to the css fix.

    Examples:

    The traditional way would be to add the attribute to each class that should have the fix applied:
    Code:
    .class1, .class2, .class3, ... {
        *display: inline;
        *zoom: 1;
    }
    Instead of doing the above, I would like to use a selector to take care of the assigning:

    Code:
    *[style='inline-block'] {
        *display: inline;
        *zoom: 1;
    }
    Is this possible? How would I go about it? I have not been able to find any help on google - only topics where elements are targeted by their attributes.
    Last edited by CaptainB; 02-15-2013 at 09:55 AM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    It’s not possible with regular CSS. CSS is addressing elements by their physical attributes (in the HTML), not the styles applied to them. You could look into preprocessors like SASS or LESS (although I have no idea if they have such features because I’m not using them) but it will always just convert it back into regular CSS anyway. For everything else you would need JavaScript to check for the current style applied and do something with those elements.

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    I suspected that was the case.
    Thank you for clarifying, VIPStephan!

    I might look into SASS/LESS and Googles alternative, which also seems pretty neat. As a bonus I found out that CSS3 actually have some of the cabilities of the more advanced SASS/LESS, e.g. calculating, which is also pretty neat.

    Have a very nice day and thank you for always sticking around!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •