0

I came across the clearfix implementation below. What could be the reason for the choice of the attribute selector (div[class="foobar"])? I cannot figure out any good reason for it. Why didn't the author use div.foobar?

div.foobar:after {
    content: " . ";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
div.foobar {
    display: inline-block;
}
div[class="foobar"] {
    display: block;
}
* html div.foobar {
    height: 1%;
}
pogopaule
  • 1,533
  • 2
  • 10
  • 17
  • 2
    `[class="foobar"]` matches elements that _only_ have the class `foobar`, whereas `.foobar` matches elements that might have this class amongst others. – CBroe Mar 07 '18 at 10:46
  • `div.foobar` will target `
    `, where `div[class="foobar"]` won't.
     – Suresh Ponnukalai Mar 07 '18 at 10:48
  • Thank you CBroe and Suresh. I didn't mention that my question was born after my layout broke after I added another class besides `foobar` to a div. And now I'm wondering why you would want the clearfix to only work if `foobar` is the only class on an element. – pogopaule Mar 07 '18 at 10:55
  • Well you’d have to ask the person who wrote this ... but `inline-block` already has the effect of encapsulating floated children, so in that case it might simply not need the clearfix. Sure that it’s not rather the switch from `block` to `inline-block` that actually broke things? – CBroe Mar 07 '18 at 11:06

0 Answers0