How to select certain properties from CSS?

Question

I have three big CSS files which have many classes. Same of those classes have the same name but are in different files.

Example: CSS1:

    ...
.btn-primary {
  background: #000;
}
    ... 

CSS2:

    ...
.btn-primary {
  background: #fff;
}
    ...

and CSS3:

    ...
.btn-primary {
  background: #4285F4;
}
    ...

Let's assume that all three CSS are called in my HTML page. Is there a way to select in my web page only the .btn-primary class from CSS3? If yes, how could I do it?

Answer 1

No.

If a stylesheet is loaded into a page, and it has a ruleset with selector that matches an element, then it will apply to that element.

Rules which provide conflicting information for a particular property will overwrite each other in the standard cascade order.

Answer 2

Not as is, but you could alter your style sheets so that it reads like this:

.btn-primary, .btn-primary.style1 { ... }


.btn-primary, .btn-primary.style2 { ... }


.btn-primary, .btn-primary.style3 { ... }

Then you could get the specific styles by using the following class:

<a class='btn-primary style2'>Stylesheet 2</a>

In short, you'll need to add some sort of additional method of narrowing down the different styles.

--

Another possibility would be to convert your css files to scss like so:

.style1 {
    .btn-primary { ... }
}

You could then use the styling from specific sheets like so:

<div class='style1'>
    <a class='btn-primary'>Stylesheet 1</a>
</div>

Answer 3

An apologetic into: the following is, in my opinion, a wrong solution. I wanted to add it as I can think of situations where you have to find this kind of hacky ways rather than change the css files.

Generally speaking, as Quentin and Bryant pointed out - there is no "namespacing" for css files and so if you load all the css files you will end up with the last overriding file's selector classes (among the name-conflicted ones) and won't be able to choose between them.

If (for some odd reason) you don't care about Chrome users - you can probably use the cssRules or rules properties of the document.styleSheets[i] object - for each loaded stylesheet file (i being the number of the file). As noted, this method does not work for Chrome. Fore some reason both cssRules and rules are null in Chrome for each of the styleSheets[i].

My hacky solution:

1. After loading all the css files as you need,
2. In javascript code, read the css file you choose as a text file. You can use AJAX for that - see this question and its answers

3. Search for the selector you want in the text you got and extract that string. You can parse the whole file for example and take the relevant part.

   In searching how to help with this step I came across the document.styleSheets[i].cssRules object and the method that doesn't work in Chrome.

4. Build a style element around it and append that style element to the head element (here's an answer that shows how to create and append style elements to the head element).

This seems like a wrong way to do it from several reasons (performance, elegance, readability) - and probably means the design of the css files is not right for your project (look at Bryant's suggestions) - but I wanted this answer to be here, as there is a way to do it, albeit a hacky one, and if for some reason you can't change the css files and have to use them as is - then here you go.

Answer 4

I don't know what is the usage of this, I mean having three files and storing different styles and even same styles into them.

But there are some tools that will normalize and minify your CSS, for example, take a look at Nano CSS

But, as other answers says it is not possible to say what class from what file apply to this page, and they will overwrite and the last style will apply for the element.

Here is also an example to find out how overwrite works:

#test-link {
  display: block;
  text-decoration: none;
  background: red;
  color: white;
}
#test-link {
  background: green;
}
#test-link {
  background: orange;
}
#test-link {
  background: black;
}

<a id="test-link" href="javascript:void(0);">Test link</a>

As you see, just the last style applied for the background color