Is there any way to disable one CSS property value only? For example, with the property 'text-decoration' there are possible values of none, underline, overline, line-through, blink and inherit.
I would like to allow all values of text-decoration with the exception of underline on ALL elements.
The pages I'm working with are dynamically generated, and can have content from all over the web- so it's not possible to target any specific element. Using text decoration 'none' works of course, but it blows away all other values as well :(
Suggestions?
There's no way to do this with just CSS and HTML. What you'd need is something like a property selector to target all of the elements on your page with text-decoration set to underline, but such a thing doesn't exist right now.
However, if JavaScript is an option, then you could accomplish this. You would first determine the style of the elements and then, if you needed to, set the style to get rid of the underline.
Since there's no such thing as property selectors in Javascript and neither JQuery, You should get all of possible elements and then check for their css property and change it if needed. Something like this:
$('*').each(function() {
if ($(this).css('PROPERTY') == 'FORBIDDEN-VALUE') {
$(this).css('PROPERTY', 'REPLACE-VALUE');
}
});
Related
Using only CSS, is there any way to determine if a selected HTML element has a specific CSS property set?
As an example, if we have CSS of:
.example { color: red }
Is there any way in CSS to select div[color has been set via CSS]? (that's obviously pseudo-code, not real CSS)
This is trivial to accomplish when the HTML includes the style inline, but I am only asking about when the style is not defined inline within the HTML.
Unfortunately not, currently that can only target attributes on a tag, not styles that have been applied to it.
If you maybe describe what you are trying to do, there maybe an alternate way to achieve what you are trying to do.
I have a piece of HTML that I need to modify and I need to keep the changes minimal (out of CSS). All I need to do is to hide a table cell until something happens. So I went ahead and added the style tag as shown below:
<td style="display:none;">
However, this causes the style class to reset, e.g. the cell which used to be vertically center-aligned is now top-aligned, and so on. My understanding is that this is because the style attribute overrides the default CSS stuff. Is that correct? If yes, how can I prevent it? I just need to add the display attribute, not reset the rest of style attributes.
I spend some time searching online and noticed that HTML5 has introduced something called scoped style. Is there an HTML4 easy-to-do equivalent for it?
It might be because doing display:none remove the node from the DOM display calculation. You no longer have a placeholder for that cell in your table. You might try visibility:hidden, which will have the DOM element keep its place in the document rendering but just not be visible.
Try visibility:hidden; instead of display:none;
Let me know if that does the trick.
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).
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.
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="..." />
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.
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.
I need to style all the input fields but one.
So i have set a rule for all the inputs on the site.
For the seachfield i need to use the browser default, so i was thinking i could just inherit all the values i have set for the general input fields. (have tried border: none to)
This does not work in FF nor Safari :( The border just gets transparent.
http://jsfiddle.net/N5KKH/1/
Any idea how i could get the default browser styling back?
EDIT: i need the first input field look like the second one:
http://jsfiddle.net/N5KKH/2/
You should be using a class on all inputs you want styled rather than a general selector on tag name.
If you cannot control this, you could try to set the input back to the default css properties which are listed here although this is not a nice solution and will probably not actually result in the default appearance of the input box.
CSS3 has the not pseudo class which could be used to select all the other inputs although this is not supported by all browsers. JS abstraction frameworks such as jQuery often allow you to use "not" selector syntax cross-browser although this is much less elegant than a pure html css solution.
EDIT
Actually, it doesn't seem to. Just gives me a solid border. Hold on, seeing what I can play with.
EDITv2
It appears that in CSS3 it can be done using the not pseudo-class. However, there doesn't appear to be a way to bring it back from a styled form element. That being said, try just adding a class to input fields you would like changed, then have it ignore the one you don't want changed.
Alternatively, you could use something like jQuery to select only the elements you'd like styled and apply the class to it or manually add the properties (but now you're adding a JS-dependance).
I'm not sure if you generate them from codebehind or hardcode them into the website, but I'd recommend that you use either a class or a name attribute on the input fields you want to look different, like this: http://jsfiddle.net/VeXgw/
I don't believe there is a simple way to unset styles because technically there is no default set style. I think your only chance would be to write some browser specific style rules with javascript to try to make it look like the defaults for each browser.
The better method may be to give all of your inputs (except the searchfield input) a class that you use to style them instead of styling ALL input tags.
Can you use an ID or Class for that single link?
Update:
Try using
border-style:inset;
should do the trick...
http://jsfiddle.net/N5KKH/10/
My understanding about CSS is that, generally if you set <div style="color: Red">, all content inside <div> will be affected. However if you put a html button inside, the color on the words on the button is not affected. I'm a bit disturbed by this exception. How do I give a reasonable explanation to it?
It's about users' expectations of the user interface.
Buttons (and other user interface widgets) prefer to look like their operating system counterparts. On Windows, users expect buttons to be grey with black text, so that's how browsers present them. It's intentional that you have to try quite hard to override that behaviour.
It's because it would be impractical for input elements to inherit style information from parent elements, this means whenever you style a form, you would have to create style rules for every type of input used in it, to make sure they don't turn out unexpected. you can however force inputs to inherit their parent's style with css:
input {
color: inherit;
}
That code will cause all input elements to inherit their parent's text color style.
The "cascading" part of "Cascading Style Sheets" (CSS) means that in general, you're right: a property set on an object will cascade down to objects below it.
However for some properties this doesn't make sense, so those properties are explicitly non-cascading (eg if you set a border on a div, you don't want all its children to have borders as well).
If we were dealing with raw XML in our DOM, that's where it would end. The colour would indeed cascade all the way down. However, we're dealing with HTML, and HTML has some pre-existing conditions, exceptions and overrides. For example, a <div> always defaults to display:block; whereas a <span> will default to display:inline;.
Buttons and input fields have a lot of defaults and overrides, which is why they show up as buttons and input fields without you having to do loads of styling on them. This is also why they override the cascading effect of certain CSS rules, including color.
You can override the override by specifying inherit for the overridden styles. So if you want you button to take the red colour you specified previously, you would do something like this:
.mybutton {
color:inherit;
}
You will want to look up the rules for inheritance in CSS; certain property values will cascade to certain descendant elements, and certain ones won't. In fact, one of the possible values for many CSS properties is inherit, which suggests that this value is not always the default.
The browser itself has default styles for input types, dependent on the OS it's running on. So for Windows, it will most likely be grey, for Apple OS' blue and round (fancy).
There are very easy ways to override this in CSS, I use it all the time in my websites, customising buttons and input fields to better match my site design with images and as mentioned before color values either inherited or changed.
Here is a nice article explaining the cascade and inheritance rules native to using CSS that might help you out.
:)
Buttons and some elements else come with their own style. This style is browser dependent. In different browsers the buttons can look a bit different.