I'd like to add an attribute to a CSS class using MooTools. I know that I can use removeClass and addClass to add and remove classes from different elements, but I'm looking to modify the global behavior of the entire class itself.
The only thing I can think of is doing $$('.classname').each and using set('style','whatever'). Is there a better way?
yes - there is a better way, you can redefine the CSS style itself, else you'd have to continuously apply changes every time you create a new element of that class and that's not very performant and practical.
check this answer: Changing style of :hover selector in mootools and the jsfiddle i made for it: http://jsfiddle.net/dimitar/Z9RPP/
Related
I'm building an app with many different components and I've run into an issue where styling from one component has overlapped with styling from another component. Other than giving each paragraph tag it's own class, is there anyway to prevent this? Say with a keyword or something?
Try to use as a specific selector as possible in your CSS file. It isn't just .class or #div. When you find a more specific selector you can always add !important after all your style.
It will have a higher importance level than everything else, but you can still change it from a different file if you use the same level.
This can be something like this:
.some-div > p {
font-size: 16px !important!
}
Please check this https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors for selectors.
I don't think there is any other way than giving unique class to every element.
Let me elaborate:
If you have used a web framework, say NextJs, you will see that it assign a unique class to every element to avoid class collision within page. And Styling IS one of them.
So yeah, Having unique classes IS necessary to avoid css collision, unless you don't go for an ID approach.
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'm using react-multiselect-checkboxes in my project.
The problem is with changing it's styling, the css classes in inspect mode have these values: .css-1r4vtzz and .css-48ayfv.
If I'm adding them in css file and override a property with !important it seems to work.
But If I add another class to that element, for example in my React app:
className="new-css-rule css-1r4vtzz" - it doesn't take into acoount the new class, even if the styling is with !important. It doesn't even show the class's name in inspect mode.
Is there a way to add that new css class and use its styling?
According to the documentation
Like props, styles supported by react-select are passed directly into
the underlying Select component. Some of the defaults have been
tweaked for the multiselect, but you can override them like normal
There are several methods of overriding the styling. They can be found here.
I've developing an app with Vue, and a third-party template, and dynamic plugins, and all kinds of trickery. I'm have a really hard time with the CSS.
Often I need to style particular element on the page, an <input> for example, and I can't figure out how to write a selector that actually works. The input may have been created dynamically by some Javascript and may have had CSS applied programmatically.
So I go to Firefox Web Developer, click on the element, and see a bunch of CSS classes. I create a rule:
.myCustomClass {
color: red;
}
put myCustomClass in the class="" tag in the <input>, and... nothing.
I'm thinking I need to prefix it like this:
.someOuterClass .someInnerClass .myCustomClass {
color: red;
}
but that rarely works. Sometimes I give up and add !important. Sometimes that works, and sometimes it doesn't.
So my question is, can I examine the classes that I can see in Web Developer and somehow derive a rule that is specific enough that it will always work?
I've read about specificity, but it's not helping.
Specificity is a PITA sometimes, especially when other 3rd party libraries are adding stuff to the mix.
Here are a few things you can try:
Make sure to add your styles to the END of the CSS. Theoretically, you can affect the order Webpack includes CSS (I've never tried it)
Add an ID not a class to a wrapper outside the elements you want to change. Then reference this ID in the CSS chain eg: #myAppID .className .subClassName {} Basically ID's are stronger than classes in CSS specificity. I would try to do this at a page/view level to make life easier.
If elements are already getting classes (as you see them in the inspector) try to reuse those classes with your "override" CSS. If the classes are modularized (Have a random suffix like someClass__34xft5) you shouldn't use those exact classes since they can change if the source is recompiled. In that case, use a "matching" selector [class^=”someClass__”] to match any selector with that prefix.
Not sure how deep you want to go, but here's an article about overriding Amplify-Vue prebuilt styling.
One caveat, if the CSS is being added inline via javascript somewhere, it's going to be very hard to override. You may want to use !important in conjunction with the above.
"...can I examine the classes that I can see in Web Developer and somehow derive a rule that is specific enough that it will always work?"
Probably, but why bother? You're already adding class attributes to elements. Why not add inline style attributes instead? Adding a bunch of classes or ids just to create a specificity chain to touch up styles is pretty messy...inline styles are barely if at all worse and are clearer to understand.
Inline attributes are the most specific CSS instructions you can give.
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/