3

Here is a difficulty I am trying to solve. I am working inside a client's page to develop a scroller interface. Basically, I cannot change the doctype, the surrounding elements and the stylesheets or scripts that are already in the client's page and I have to make my little block of code "fit" inside this. This is common for web developers. The tricky part now is that some img elements inside my block are actually being targeted by a CSS rule inside the inherited client's stylesheet (which, of course, I cannot remove or change). It would be too long to explain why here in this case I actually can't use more specific CSS rules myself to compensate this, but it's a fact. So my question is : is there a way to prevent a HTML element from being targeted by a CSS rule other than creating another rule or deleting the rule? The difficulty is that a rule like 

.containter1 .containter3 { ... }

will target an element inside :

<div class="container1">
   <div class="containter2">
      <div class="containter3">Element
      ...

Elements inside the page don't make "walls" for CSS rules, which "jump" over containers to target elements. So a rule like 

img { ... }

will target any img tag. The only way I know to compensate this is to create a more specific CSS rule targetting the precise img to protect. But I cannot do that here. Is there a way to get the same result without creating a CSS rule, only by adding HTML?

/* EDIT TO CLARIFY */

I know CSS rules, specificity, inheritance, etc. My question was more pragmatic. Consider this example to clarify the problem : imagine you have a client's stylesheet that you can't touch and that defines the following general rule:

img { display:none; }

The problem is that you cannot set a corresponding generic rule to do the opposite, like :

img { display:not-none; }

because there is no such thing as the opposite to none. The opposite of "none" can either be "inline", "block", "inline-block", and so on.

So basically, this means that the first generic rule forces you to explicitly define the display property for each and every img in your page. And that sucks. So I was trying to find a hack to solve situations like this (my actual problem is even worst than this, believe me, but this example is much clearer and quicker to explain).

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
barakadam
  • 2,179
  • 1
  • 16
  • 15
  • 1
    you can use an inline style written into the doc with html. or you can write a little script to change the css value on document load. – Rooster Nov 15 '12 at 16:00
  • Are you saying that you can't add any CSS? Or you just can't add your own/edit already available CSS file? – Viktor S. Nov 15 '12 at 16:02
  • 1
    There is no generic "don't be targeted by rules of type X" kind of thing in html. Can you edit your question and show us the specific selector you're trying to avoid being matched against? – Jeroen Nov 15 '12 at 16:11
  • If you're code is going to be inserted on the page, I don't understand why you can't write more specific CSS to compensate. I know you said it would be too long to explain but... could you? – Matt K Nov 15 '12 at 16:15
  • possible duplicate of [Is it possible to "remove" styling from HTML elements?](http://stackoverflow.com/questions/460197/is-it-possible-to-remove-styling-from-html-elements) – Jukka K. Korpela Nov 15 '12 at 16:56
  • Thanks guys, just see my edit to clarify – barakadam Nov 15 '12 at 17:15
  • 1
    unless you can insert an iframe into the space you're given on the client's page, I'm afraid you will have to reset all elements affected. – Matt K Nov 15 '12 at 17:40
  • you can't reset a generic display:block without looping through each and every element targeted by the generic rule. Thanks anyway – barakadam Nov 15 '12 at 20:06
  • What *do* you have access to? – Faust Mar 22 '13 at 16:34

4 Answers4

2

If you're saying you want to prevent targeting without changing any code, then no, that's obviously not possible.

In-line styles always over-ride style-sheet rules ( unless they're using an !important tag, then you'll need to also use it).

You should be able to reset whatever elements you need, using syntax from your favorite CSS reset. Here are some options:

http://www.cssreset.com/

So, something like -

<div style="border:0 !important;padding:0 !important;margin:0 !important;height:auto;"></div>

is your best bet.

iabw
  • 1,108
  • 1
  • 9
  • 24
  • I have no access to the elements themselves (JS-generated), so I need to "protect" them in a more generic way, that is precisely why I asked this "tricky" question. I edited it to clarify. Thank you – barakadam Nov 15 '12 at 17:17
  • It seems like you're dealing with a pretty bad base page setup and that sucks. "easy generic solution" and "badly formatted markup" rarely play nice together, and CSS is worse at it than other stuff because of the cascade. Good luck. – iabw Nov 15 '12 at 17:35
  • You are not getting it. My client is a big international company. They ask for a JS scroller for all their websites. There is no "bad base page setup". They just made a generic rule on a container and I am actually working inside this container. I am asking a clear theoretical question. Not trying to deal with "badly formatted markup". This is not the point. But thanks for your time. – barakadam Nov 15 '12 at 17:53
0

The only way you can change CSS for specific element is modification of existing styleshits or creating new style which is more specific and will overload other styles.

and I have to make my little block of code "fit" inside this.

Once you have make some block of code, you can put style tag inside that block of HTML code like this, for instance:

<div id="block_of_code_available_for_modification">
   <style type="text/css">
       //css code which will fix styles of your content without influencing other elements on a page.
   </style>
</div>

Or, if you have just a few elements you need to fix styles for, you can use style attribute of HTML elements (once you can set modify HTML, you can always add something like below... Well, the same as adding style tag). Priority of css properties inside style attribute is the highest one. Except if there is no !important in some previouse styles:

<img style="any css properties you need" src="..." />
Viktor S.
  • 12,736
  • 1
  • 27
  • 52
  • thank you for this answer, but the question was trickier. My edit might clarify it for you. Thanks – barakadam Nov 15 '12 at 17:16
  • Still see no problem. You should be able to inject your code somehow on a page. You can modify each element, as I understand from your description ("So basically, this means that the first generic rule forces you to explicitly define the display property for each and every img in your page." - you can do this, but do not want and I understand you), but why can't you just add – Viktor S. Nov 15 '12 at 17:24
  • display: not-none does not exist, this is why I said it forces you to explicitely define the property for each tag. I do not want (nor can) to access the tags one-by-one (they are generated and controled by JavaScript). The idea was to find a "generic" solution to this problem. I thought it was theoretically challenging. If I find a solution, I'll post it. Thanks for your time – barakadam Nov 15 '12 at 18:35
  • Can you use :not() ? or maybe a bit of future fun with 'parent' selectors: http://www.sitepoint.com/css-selectors-level-4-the-path-to-css4/ in the new spec. If you can add a parent class with JS, you can could set your own generic css to undo the settings of any other css with a generic reset specific to descendents of your id or class (perhaps). – MyStream Feb 05 '13 at 03:22
0

The default display value for an img element is inline-block. If you want to reset the display value for all images, why not use that?

If you've got multiple different types of elements that are being set to weird values, then the problem is maybe a bit more complex as you'd need to consider which elements to set to what display type. But all HTML elements do have well-defined default display types, so it shouldn't be too hard to reset them all.

img {display: inline-block;}
span, a, etc {display:inline;}
div, etc {display:block;}
... etc ...

If it comes down to it, you could just use one of the reset CSS scripts that are available, to set everything back to the correct defaults.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • Hi, thanks for answering. The question was trickier. I was asked, as a developer, to create a module that could fit in many different pages of a huge website from a corporate company. Problem is : they had set generic incoherent rules on many tags (not display property : that was just a case study example) and I could not change their CSS, as my "module" was to be delivered as a stand-alone element that could just be embedded in their own code... Anyway, I did it the hard way. So basically, no one has been able to find the magic trick. – barakadam May 01 '13 at 01:06
0

No there is no way you can stop other rules from getting applied on a particular element. you have to redefine all those rules for that html element so they will overwrite all the other rules.

Vishal
  • 816
  • 11
  • 19