What does the css line: *[class].testClass{ } actually mean?

Question

I was just hired at a job to create interactive emails for a marketing company, which is some cutting edge stuff.

I'm browsing through the guy's templates who left here, and his CSS has some things I cant figure out. I'm in charge of creating new CSS files and templates, but I have never seen this before. Can someone help me figure out what this all means? I am having trouble finding anything about it online

For instance, some lead with *[class], some lead with *[id] and some lead with none of those.

Here is an example.

*[class].h83 {
    height:43px !important;
}

*[class].pt50 {
    padding-top:50px;
}

*[class].pl30 {
    padding-left:30px;
}

*[class].anim_h {
    display:none;
}

*[id]#MMGContainer {
    width:640px !important; 
    height:500px !important;
    position:relative; 
    text-align:left; 
    display:block;
    overflow:hidden;                
}

*[id]#MMGContainer #hotspot_03_btn.hotspot:after {                
    top:166px;
    padding:0;
    display:inline-block; 
    content: url(images/1/icon-2.png);
}

#mobile-cta, .mobile-only { 
    display: block !important;
    max-height: none !important;
    width: 100% !important; 
    height: auto !important; 
    overflow: visible !important; 
}

Answer 1

Most of these declarations are overly verbose and could be simplified by quite a bit.

Example and Breakdown

Let's use *[class].h83 as an example as it has a few things going on :

• * - This simply is a universal selector, so it doesn't do much here.
• [class] - This is an attribute selector, which will target any element with a defined 'class' attribute.
• .h83 - This will target an element with the class 'h83'.

So putting all of these things together, you'll get a style that target any elements with the class attribute of 'h83'.

Simplification

As I mentioned initially, nearly all of these styles are overly verbose. The *[class].h83 example earlier could easily be rewritten using something as trivial as :

.h83 { height:43px !important;}

Why is this? Well you know the universal selector * is going to handle targeting all elements, so that isn't going to be very specific in this case. Secondly, you know that if you are using .h83, you'll be targeting an element with a class attribute of h83, so you are already guaranteed to have a class attribute (thus you don't need the attribute selector).

Note on Simplifying Selectors

Currently all of your selectors are prefixed with * and some type of attribute selector. While this will work, it's generally unnecessary.

If you are using either id-based #id or class-based .class selectors, then you shouldn't need to preface them with *[id|class] respectively as the # or . character will take care of that on its own.