#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    3
    Rep Power
    0

    Question Help Compress this CSS please


    Code:
    .one_third img.alignnone, 
    .one_third img.alignright, 
    .one_third img.aligncenter, 
    .one_third img.alignnleft, 
    .two_third img.alignnone, 
    .two_third img.alignright, 
    .two_third img.aligncenter, 
    .two_third img.alignnleft, 
    .one_half img.alignnone, 
    .one_half img.alignright, 
    ... (bunch more) etc,
    .last img.alignnone, 
    .last img.alignnright, 
    .last img.alignncenter, 
    .last img.alignnleft, 
    etc ... { max-width: 100%; }
    Is this a valid most browser compatible way to shorten?

    Code:
    .one_ img[class*='align'], 
    .two_ img[class*='align'], 
    .three_ img[class*='align'], 
    .last img[class*='align'] {
    max-width: 100%;
    }
    Guess I could use ^ for “Begins With” option instead of * too.
    It is really the first part ".one_ .two_".. that I am unsure of if it will cover all options and be browser compatible.
    Thanks in advance for help.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    716
    Rep Power
    442
    Couldn't you just put:

    Code:
    img {max-width: 100%}
    If there's a case where you want the max-width to be something other than 100%, you can overwrite it with a class.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Welcome to DevShed Forums, dragonmac.

    I agree with RDoyle. Instead of shortening the selectors while still using lots of classes, you should rethink it. For example, what is the purpose of the "alignnone" class? Is it just so that all <img> elements have a class?

    Unless you're supporting IE6, it's fairly safe to use attribute selectors these days (though there are a few bugs to be aware of).

    It is really the first part ".one_ .two_".. that I am unsure of if it will cover all options and be browser compatible.
    You can't use a class selector to specify only part of a classname like that. CSS does not recognize an underscore character as some sort of magic separator. You would need to use an attribute selector for that too.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    3
    Rep Power
    0

    class selector wildcard?


    Originally Posted by Kravvitz
    Welcome to DevShed Forums, dragonmac.

    I agree with RDoyle. Instead of shortening the selectors while still using lots of classes, you should rethink it. For example, what is the purpose of the "alignnone" class? Is it just so that all <img> elements have a class?
    Thank you good to be here
    I would love to use a simple option like that but this is an edit to a WordPress(WP) site Theme. Theme is tailored for a responsive layout. I could try the simple code but the CSS is so deep I would have a hard time making sure it did not effect anything it should not.

    Originally Posted by Kravvitz
    You can't use a class selector to specify only part of a classname like that. CSS does not recognize an underscore character as some sort of magic separator. You would need to use an attribute selector for that too.
    Yeah I kind of figured that and the _ was not to be a wildcard it was part of the class name. The names of the classes are part of a short code in WP. So the short code in the Post would appear like [one_third_last]body [/one_third_last] or [one_third]body [/one_third]. This goes on for about 10 different column division that can be used. The way it transposes to the html is div class='one_third last' or div class='one_third' respectively. Notice "last" is really it's own class.
    Anyway when I was looking at how to shorten this I could not find a way to "wildcard" the .one_third, .two_third etc. classes.
    Is there a way to do that? Then I keep what I started. If all I can do is the img.[class^='align'] i guess thats ok still 1/4 smaller then the whole thing.
    I could not figure how to get valid CSS with

    Code:
    [class^='one_'] img.[class*='align'], ... {
    ...
    }
    kept saying invalid CSS.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    3
    Rep Power
    0

    Talking I think I got it


    It was staring right at me, lol
    Code:
    div[class^="one_"] img[class^="align"], 
    div[class^="two_"] img[class^="align"], 
    div[class^="three_"] img[class^="align"], 
    div[class^="last"] img[class^="align"] {
    max-width : 100%;
    }
    it validates as CSS 2.1+. Thank you for the help it got me to the finish line. Looks like it works in the real world have more browsers to test.
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    The class attribute takes a space separated list of classes, so it's probably better to use the "*=" attribute selector instead of the "^=" attribute selector (since you don't know what order classes might be in when there is more than one).

    Actually, that's not in CSS2.1. However, CSS3 Selectors are generally well supported (in IE8+ and non-IE browsers) and the "*=" attribute selector will work fine for this.

    The names of the classes are part of a short code in WP. So the short code in the Post would appear like [one_third_last]body [/one_third_last] or [one_third]body [/one_third].
    Oh, that. I really don't like that feature of WP.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo