CSS specificity issue for div, span, a, etc

Question

I want to override another style sheet and set the float for all elements to none. If I use 'div, span, a' as the selectors or even 'body div, body span, body a', it doesn't override the previous class selector. I could use !important but this isnt great for obvious reasons.

.class {
    float: left;
}

/* my overide */
div, span, a {
    float: none;
}

Note- in the code ive only shown the class of 'class', but actaully their are many classes and id's.

Is there a way to do this without using !important? The reason im doing this is im mobile optimizing my site with media queries. I need to remove absolute positioning, floats, etc for all elements, but then i will want to add some of these styles to specific elements. Thanks

Using the * selector is generally ill-advised. Selectors focus on the key selector first (the right most selector) and so using the * selector means that the browser must find all elements on the page. This is a huge performance issue. — Jamie Dixon, Oct 05 '11 at 10:16
OK. So if I want to ignore all float etc styles for every element on the page, do I have to go in manually and select each one? — Evanss, Oct 05 '11 at 10:19

score 1 · Answer 1 · edited May 23 '17 at 12:19

As I wrote in my comment above:

Using the * selector is generally ill-advised. Selectors focus on the key selector first (the right most selector) and so using the * selector means that the browser must find all elements on the page. This is a huge performance issue.

You can read more in this answer: (why) is the CSS star selector considered harmful?

Rather than using the * selector as you have, I'd stick with targetting the elements you want to affect, specifically.

Chances are, there will only be a few types of elements in your page that are floating.

These are usually some divs, perhaps some images, a list or two?

div, img, ul, ol{
   float:none;
}

If there's a few more you can include them also.

Thanks for your advice. Ive modified my question, but im still having the same specificity issue. Thanks — Evanss, Oct 05 '11 at 10:32

sandeep · Answer 2 · 2011-10-05T11:31:22.627

0

@jdin; for overide the .class float just write like this:

div.class, span.class, a.class {
    float: none;
}

EDIT:

Define an ID in your body tag like this

HTML:

<body id="home">
  <div>Tag</div>
<span class="class">Class</span>
<div id="id">ID</div> 
</body>

CSS:

body#home *{background:pink;border:1px solid #000}

Check this example http://jsfiddle.net/sandeep/D7Sg6/2/

edited Oct 05 '11 at 11:31

answered Oct 05 '11 at 10:51

sandeep

91,313
23
137
155

Sorry, I think I haven't been clear. Their are many classes and id's on the page, and I want a quick way of overriding them all. Ive updated my question. Thanks – Evanss Oct 05 '11 at 10:57

CSS specificity issue for div, span, a, etc

2 Answers2