Is there a way to apply a class to a set of nodes matching a CSS selector, inside the actual stylesheet?
This is of course possible in a single line of jquery, but is it possible to do in the css itself?
input[type='button']
{
// apply the class 'k-button' to these
}
Is there a way to apply a class to a set of nodes matching a CSS selector, inside the actual stylesheet?
Nope, there's currently no way of doing that with standards compliant CSS.
No,there is not way of attach class with css,but you can use this code with jquery
$(".YourClassName").addClass("YourNewClass");
best regards
No, you can't do this with CSS. You're talking about altering markup, which CSS is really not designed to do (content: rules aside). As others have suggested, I would look into the 'extend' options in SASS, or use jQuery if need be.
That all being said - why can't you copy the relevant styles from the class declaration, and paste them into your selector? Or, just tack your selector on to the class declaration?
Related
What is the CSS selector equivalent of XPath "//a[contains(text(),'Next »')]"?
Thanks
You cannot find text with CSS directly, you could set CSS properties via JavaScript based on the internal contents but in the end you would still need to be operating in the definitions of CSS.
Does a css class selector always require a definition? For example, if you found in the html: div class="banner", should you always find a .banner in a css file? I ask this question as I've been looking at some website themes and I sometimes find these selectors without any other reference. I'm just not sure if it's an oversight or something common.
There are many reasons to have class names on your HTML elements without having CSS rules associated with them. A couple of examples:
More readable markup. If a component is properly labeled, it's easier to find, debug, or work collaboratively on.
Javascript. Sometimes an element requires some Javascript behaviors, but doesn't inherently need CSS styling itself.
So to answer your question: No, you do not need to define each class or selector in your CSS.
I saved and am using the bootstrap css but it conflicts with my main css.
it has tags body, html, a, img, p... and my css loses configuration
how can I use the bootstrap css without colliding?
thank you
Try importing your custom CSS after Bootstrap CSS.
In CSS, the “!important” suffix was originally intended to provide a method of overriding author stylesheets. Users could define their own “user stylesheets” and could use this suffix to give their rules precedence over the author’s (website creator’s) styles.
Unfortunately, and quite predictably, its usage has spread massively, but not in the right direction. Nowadays, it’s used to counteract the pain of having to deal with CSS specificity, otherwise known as the set of rules which dictate that “div h1 a” is more specific selector than “div a”. Most people that use CSS on a daily basis don’t know enough about CSS specificity to solve their problems without using the “!important” suffix.
1.over ride those styles in your css file by using !important property. bootsrtap css either override or extend your css with bootstrap css so if you want to override entire css of some class best to use !important property.
2.if your are using script in your code so its very easy to differentiate the css styles.
Try combining into one CSS, multiple CSS slows down the sites.
Even, Bootstrap has its own body,html, etc tags. You have to edit them or delete/comment them. So it avoids conflicts.
Generally, the last CSS property will be applied, so if you put your body, html etc at the end of Bootstrap.css, that might work, but not recommended.
I'm working with jQuery datatables and oTableTools aButtons. I'm doing this:
oTableTools: {
aButtons: [
{
sExtends: 'text',
sButtonText: 'Add +',
fnClick: function ( nButton, oConfig, oFlash ) {/*stuff*/},
sButtonClass: 'btn-success'
}
]
},
My problem is that the a.DTTT_button class on dataTable.tableTools.css:38 is overriding the .btn-success class on bootstrap-combined.min.css:9, so my button is grey instead of green. They are both being loaded from external sources, so I can't edit them, and changing the order in which they are loaded did not affect anything, presumably because the defintion in dataTable.tableTools.css is more specific, what with being specifically for anchors.
Is there a way to force sButtonClass to take precedence over a.DTTT_button at loadtime, or am I going to have to create a new class in my local css file to duplicate the style I want and call it instead? That feels less clean to me, so I'd rather not do it if I don't absolutely have to.
I think the cleanest way given the parameters in this case is actually to create a a.sButtonClass selector in your "local css file" that loads after the a.DTTT_button class. Specificity will match, but the cascade will win for a.sButtonClass. I know you said this "feels less clean," but your contraints of not being able to manipulate the two css files make it one of the cleanest solutions. Also, if you are using a preprocessor (like LESS that boostrap is based off of), then you can have your local enhancement automatically match the bootstrap class by using that class as a mixin for your more specific selector.
However, an alternative is to not apply those styles by a class at all, and write the sButtonClass styles directly to the style attribute of the anchor element, as that will override anything that a.DTTT_button is doing (assuming a.DTTT_button does not have !important tags on its properties).
You can't change precidence unless you want to remove and re-insert the sytesheets into the DOM using JavaScript in the order you want. That's a little ugly, but it can be done.
The proper way is to use CSS specificity, but since you can't edit the external files, manipulating the DOM may be the only way to go.
This may help:
Add: Add stylesheet to Head using javascript in body
Remove: How to dynamically remove a stylesheet from the current page
I have an extension which adds some elements to pages. I'd like those elements to look exactly the same on every site. Considering the fact that there are some, ugh, developers, who write their CSS rules with "!important", is there a way to override such rules without adding "!important" to every rule in extension's CSS? Maybe there are some CSS3 or Chrome/Webkit's proprietary methods to do so?
Define your class with parent element class. You could also use !important keyword.
i.e.
<div class='my_parent'>
<div class='class-1'>...</div>
<div class='class-2'>...</div>
</div>
in your .css file
div.my_parent class-1{..}
div.my_parent class-2{..}
No, actually if someone use !important in the css rules there is no other way to overwrite without putting !important. For example,
body{background:transparent !important}
can be overwritten by using
html body{background:blue !importamt}