CSS Help

[Thorin]

Man, I wish I had you on IM because I'm trying to figure out what you are are trying to do?

He's trying to avoid the mind-numbing task of editing his own css file with 800+ style rules to include .gbs3 in front of each style rule.  He still wants different styles applied to different elements, which he already has defined in his css file.

[Melbosa]

So to be clear, the plugin has the gbs3 class attached to html elements in an html page.  There is then a css file that specifies colours, etc, for, say, an H1 with the class gbs3 by stating ".gbs3 h1 { color: red }".  You then want to override the settings in that css file with your own css file, which specifies colours, etc, for a lot of elements.  And you just don't want to edit your own css file to add the class specifier to 800+ entries in your file.

Thorin has it, what I exactly want it to do in his first paragraph.

I was just hopeful I could use something in CSS to accomplish that rather than a large copy paste (fine replace regex) or similar function.  Something that is clean and that was one or two lines.

This is very common in skinning in many areas (which I assume you are aware) - the base system uses one defined set of elements in a CSS, and your skin overrides those elements with your own CSS.  The problem here is I didn't write the second CSS, I am borrowing one from an all-encompassing CSS sight called bootstrap that this particular plugin will use if you define it, but the all-encompassing CSS I downloaded does not have the plugin's class of .gbc3 defined on its elements.  I was looking to see if there was an easier way to apply a class to all the elements in the file without having to put the class in front of every element in the file.

So I take it there isn't a way to accomplish this with some CSS class magic... just the "hard" way of putting the class in front of every element in my file as Thorin and Mr. Analog have suggested?

[Mr. Analog]

The assumption I'm making here is that his HTML elements already have a reference to that class, if so then all he needs to do is include that stylesheet and let the class references do the work, if he wants to define that class on all elements he can use the asterisk syntax (*.gbc3 { //stuff } )

If he doesn't have that class and rather has two stylesheets that have definitions that may override each other just include the stylesheets in the order he wants to override them (last include wins)

Otherwise he should consider what Tom suggested and check out less:
http://lesscss.org/

?

Also to add a class definition to an element you have to flip it around

Code Select Expand



h1.gbs3 { color: red }



ALSO also I just realized you might just be missing commas

(from Stack Overflow)

Code Select Expand


.composite,
.something { display:inline }

.composite,
.else      { background:red }

[Melbosa]

Unfortunately, less isn't an option as I don't want to modify the code of the plugin (so that it is upgradable with my skin in tact), and I do not have access to the hosted solution.  I am just trying to skin it.

Mr. Analog, you are correct, the HTML refereces gbc3 in its elements and  I don't want to assign the class to all elements.  My stylesheet is the second one loaded (the nature of skinning requires this), but my CSS does not reference the gbc class, only the elements themselves (which are ignored because the HTML elements define a class).

As stated before, just looking for an easy way to reference the class in my CSS for all the elements I've defined without having to include that class on every element definition in my CSS, just say "somehow" tell it at the top of the CSS file to include the class with every element in the CSS file.

Make sense what I am looking for?  Not possible?

[Thorin]

Yeah, I think you just need to edit your css file, since you're trying to alter the definition of the rules and the rules are defined in that file.  Sorry, css just isn't that smart.

[Melbosa]

Quickly example:

HTML

Code Select Expand

<h1 class="gbc3">Hi World</h1>
<h2 class="gbc3">Goodbye</h2>


Base.css

Code Select Expand

.gbc3 h1 {
     color: red;
}

.gbc3 h2 {
     color:blue;
}

.gbc3 h3{
     color:orange;
}

My Skin CSS

Code Select Expand

h1 {
     color: black;
}

h3 {
     color:black;
}

Base.css is loaded first, My Skin CSS loaded second.  Want to force class .gbc3 for all my CSS elements without putting in my CSS .gbc3 on lines h1 and h3.

[Melbosa]

Yeah, I think you just need to edit your css file, since you're trying to alter the definition of the rules and the rules are defined in that file.  Sorry, css just isn't that smart.

Damn, was hoping it was easier than that.

[Mr. Analog]

You can use !important on your CSS

From Stack Overflow:

Code Select Expand

a.bakground-none { background: none; }
body .bakground-none { background: none; }
.bakground-none { background: none !important; }
"The first two ?win? by selector specificity; the third one wins by !important, a blunt instrument."

http://stackoverflow.com/questions/20954715/how-to-override-the-properties-of-a-css-class-using-another-css-class

[Thorin]

He'd still have to edit 800+ style rules in his css file.

He's trying to edit his css file without having to edit it

[Mr. Analog]

Yep, that's impossible because the earlier definition is more granular than the latter 

Oddly enough if it was using a more generic selection it wouldn't be a problem.

If it helps this problem could also be solved in the element class attribute by specifying override classes in order but then you'd still have to define those classes and add them to the class attribute of everything you wanted to affect

This is why learning CSS specificity and how it works is really important:
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

[Melbosa]

Yeah, like I said I didn't write it, just skinning it . Oh well......

[Darren Dirt]

Yeah, but is there a way to say every element in this CSS file is an override for the .gbs3?  I have over 800 Elements in my CSS copied from bootstrap.  Thats a lot of CTRL+Vs in front of every element.

Text editor with RegEx replacing is your friend

also not sure if related to or helpful at all with what you need, but this new RW thread mentions some "source code playground" tools that can be helpful in addition to the Firefox CSS Explorer etc. Stuff like "CSSdesk" mentioned above ITT.

You could do it in "less". then compile to css.

Ooo! Good suggestion! But might be a bit of up-front mental "work" to really get how tools like LESS can be beneficial for advanced CSS'ing.

I still think either some solid RegEx replacing (or even a quick script (even if just written in JS) that parses the entire CSS file as a string, and for each line where it is required just inserts the required text snippet) = relatively quick and easy modified contents.

[Darren Dirt]

Yeah, I think you just need to edit your css file, since you're trying to alter the definition of the rules and the rules are defined in that file.  Sorry, css just isn't that smart.

Yeah nowadays after all these years we wish that css was MORE smart. Hence the need for LESS etc.


And what about instead of modifying the existing CSS, create a new CSS with all the elements you want to over-ride and just include that new class -- and then include that new CSS after the existing one, for the result similar to what Mr. Analog linked to a demonstration of ... that way if the ORIGINAL css ever got updated or reverted you wouldn't be cursing like a sailor.

I like Thorin's step-by-step for how to utilize RegEx replacing though -- always "clean" the data first so you have a consistent structure before doing your mass find-and-replace. In the case of CSS it can be compressed without any data loss as he described which definitely makes it easier to identify individual "lines" to which your find-and-replace logic would apply.

[Melbosa]

Thanks everyone for your help and suggestions.