I have a div with class "class1" . And a class: .class1 input {etc} so that all the inputs in the div get styled.
Is there away to make sure one specific input in the div does not get styled, but instead keeps the default input styling/button?
Since there is no :not selector in CSS 2.1, your best bet would be to assign classes to all of the inputs that you want to have a certain style. Then, target them like this:
.class1 .inputclass1
and then your other input (the one that needs default styling) won't be affected.
If you want to use CSS 3, then you can use :not like so:
.class1:not(.defaultclass1)
and give defaultclass1 to the element you want to have default styling.
You can either:
(1) Amend .class1 input {etc} to .class1 input.a {etc} and apply the style a to all your inputs bar the special one.
or
(2) apply an inline style to the special input in question resetting its format.
in a situation like that you have two kinds of inputs in this div. one that should be styled and one that shouldn't. You basically have two classes of inputs, but you haven't givven them class names. I would suggest giving them class names (e.g. styled and nonstyled or what not) and basing your css off of that. Otherwise you could use a pseudoclass, but that I'm not too sure on.
You can take a look at the :not() selector. However, this is not supported by IE. Probably easiest to provide a CSS over-ride for the specific input that you would like to be "default" styled.
in case you are planning to support all browser which do not support CSS3. You can over-ride the rule by making another class. like
.class input {etc}
and then over-ride etc rule by giving some other class to that input e.g. .notClass
input.notClass {over-ride etc }
You can use .class imput[type]{} if this is another type of input
Best way is use a class for that all input like .class1 input.all{} and leave the non style one without any class
Related
I want to do this because I get stylized text from "Portable Text to React". However my index.css (global style)
which has a css reset, removes all the default styling from elements of the portable text.
How can I exclude the reset.css from this 1 react component (or solve this in another way you know) ? Adding .unset * {all: unset} or .unset * {all: unset} class does not create the behaviour I want. It removes all styling instead of re-giving the styling to h1s, spans, lists etc.
In here what you can do is, you need to separate your styles for different components. Normally don't use global css to add styles to jsx code.There are couple of ways to add separate css for your component. In here what it does is, these styles are targeting only for selected components.
Option one -use module.css file.
in here you can add css classes only inside the module.css file.(dont use id selectors inside here).Read this reference, you can get full idea about this.click here
option two -use third party library like styled component.
this doc explain clearly what need to do and have many examples to get idea.click here to navigate the doc
Solved: Give this class to the element. revert behaves exactly the way I want. Returns all elements inside this one element to browser default styling, while my css reset remains active on rest of the application. I don't know if there are any drawbacks.
.unset * {
all: revert;
}
I have recently observed the following change more and more often, people write div.class or div#id instead of just .class or #id.
What is the best way to target your classes in CSS And why?
If I remember correctly, div.class has the same result as .class.?
div.class will affect only to div elements, and is more specific than just using .class. So, if you write both, div.class and just .class in a div, the first one will win in preference.
But I think that is more elegant don't using it, if you don't have a good reason for that (you may want to apply something just to div elements with this class and not to any other).
What the best way is depends on what you want to achieve. Do you want to make sure that a block style can't be accidentally applied to an inline element? Or do you have complex CSS and performance is becoming an issue?
If you use div.class, then the style will only be applied to div with that class. <span class="class"> won't be affected. That means you can also define span.class to do something special for span or you can move common styles to a generic .class definition.
If you care about performance, here are a couple of links for you:
http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS
http://csswizardry.com/2011/09/writing-efficient-css-selectors/
(google for css performance)
.class will effect all the element we gave class name as class. If you use div.class, then the style will only be applied to div with that class. Other elements won't be affected. following fiddle explains more.
http://jsfiddle.net/wtcyvju2/
.class can be used for both div class and span also & div.class can be used when tag has that specific class
I'm trying to target the following element in css to change a property but I'm having issues correctly writing it in css.
How would I target
<div class="footerSubMenu pull-right" id="footerRight2">
as shown to me in google chrome inspect element.
Would it simply be:
div.footerRight2.footerSubMenu.pull-right{}
An ID selector begins with a #, and a class, .. Use the appropriate delimiter for the appropriate identifier:
#footerRight2.footerSubMenu.pull-right
Using . for all three as you are doing doesn't make sense since you're looking for one ID and two classes, and not three classes.
If you just want to target #footerRight2 regardless of what classes it has, you should use the ID selector by itself. You only need the classes if you want to apply styles to this element only when it has those classes.
Since id is unique, you just need to use:
#footerRight2 {
/* Your styles here */
}
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/