/    Sign up×
Community /Pin to ProfileBookmark

How to have an element only get some styles?

Copy linkTweet thisAlerts:
Sep 14.2011

Lets say I have a page with a CSS with lots of lines of code (for fun lets say 10k lines of CSS). Then i have a calendar that ive used many times that works good, but when I put it in the page with 10k css it completely breaks the calendar…

Is there an easy way to set this up to have this single element only use CSS from one source and ignore the page CSS? I seem to waste so much energy going over CSS and overriding page styles just for a single element… there has got to be an easier way.

To make things more difficult, I often have things work perfectly in all my browsers but IE, which makes my job even harder since firefox has the debugging tools.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@SMTSSep 17.2011 — You probably have overlapping styles.

For example:

In your calendar you have a "event" class, and you have the same class in your page.

Make sure everything is unique. The only quick way to fix this is search and replace!

Also, make sure you close all of your brackets.
Copy linkTweet thisAlerts:
@ZeratulsDomainauthorSep 29.2011 — Yeah I know what the problem is, and I know how to fix it. My problem is I am looking for a problem that wont potentially take 30m to find and fix when im dealing with thousands of lines of CSS and several different CSS pages.

I think this is a major oversight with HTML and im surprised it has yet to be fixed. If this was done right, you would be able to use easily use as many styles in your page as you wanted to, even if they were all generic and badly written.

For example: Lets say style1.css had 10000 lines of css, while some of that effected every table. Then you had a second style2.css with 20000 lines of styles and some of it also effected every table.

Now if you put in a table, other then the specific styles gotten from a specific id/class, you have no know of telling that table what CSS to use.... Which is my problem. Because even if just 5% of a 20000 line style page has styles that apply to all elements without id/class, then it can still turn into a headache fixing this problem.
Copy linkTweet thisAlerts:
@SMTSSep 30.2011 — "I think this is a major oversight with HTML and im surprised it has yet to be fixed."

I'm sorry, but other programming languages are not any better. I advise that you don't learn them. CSS/HTML is one of the easiest as far as how things are loosely formatted. They can be VERY generous in the way that they allow you to code them.

I don't believe that this is an 'oversight'. To implement another set of rules or fixes for this would introduce more complications, and then people would be complaining, asking: "How to have an element many styles?"

I don't know if this makes sense, but you should be grateful it is as easy as it is.

Anyway, I hope everything works out. ?
Copy linkTweet thisAlerts:
@KorSep 30.2011 — The problem should be solved by creating those CSS classes ergonomically and accurate.

Yes, it is possible to give different elements the same class, but to have, in fact, different behaviors. Use compound DOM selectors:
<i>
</i>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;style type="text/css"&gt;
.fontcolor{
color:#F00;
}
.bluediv .fontcolor{
color:#00F;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="fontcolor"&gt;this is red&lt;/div&gt;
&lt;div class="bluediv"&gt;
&lt;div class="fontcolor"&gt;this is blue&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Or another example:
<i>
</i>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;style type="text/css"&gt;
div.fontcolor{
color:#F00;
}
span.fontcolor{
color:#00F;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="fontcolor"&gt;this is red&lt;/div&gt;
&lt;span class="fontcolor"&gt;this is blue&lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@ZeratulsDomainauthorOct 08.2011 —  "I think this is a major oversight with HTML and im surprised it has yet to be fixed."

I'm sorry, but other programming languages are not any better. I advise that you don't learn them. CSS/HTML is one of the easiest as far as how things are loosely formatted. They can be VERY generous in the way that they allow you to code them.[/quote]

Id advise you to learn how to use simple quote tags before acting smug. I do OOP PHP prorgamming for a living, but I also know JS/ajax/jquery, assembly, c++/c#, vb6/vb.net, etc.

When you start grabbing code from multiple sources and try to make them all work on a single page = often get these CSS problems = I need to spend my time fixing it.

The problem should be solved by creating those CSS classes ergonomically and accurate.

Yes, it is possible to give different elements the same class, but to have, in fact, different behaviors. Use compound DOM selectors:[/quote]

I know that, but the css is often not done correctly and I get problems.

I still think its weird how there is no way to tell the HTML to ignore all styles other then the one you specify as a the class.
×

Success!

Help @ZeratulsDomain spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...