I want to apply css to all class that starts with for example 'abcd-' but I don't want to apply that css to class with name for example 'abcd-dontapply'. Can I do this?
What I tried
a[class |= "abcd"] :not([class = "abcd-dontapply"])
{
---define CSS
}
But this is not working, it is not applying CSS to any class that starts with 'abcd-'.
As mentioned in your question:
Don't add whitespace unnecessarily. The whitespace just before the
:not is significant, i.e. it changes the meaning of the selector.
a[class^="abcd"]:not(.abcd-dontapply)
{
/* define CSS here*/
}
You can find all attribute selectors specifications here.
You can do that with proper css selectors:
starts with selector would be like-
div[class^="abc"]:not([class="abc2"])
I have a sample jsfiddle for you:
http://jsfiddle.net/8w65ffj0/1/
Related
I've an element I want to style only if it's got two classes applied to it:
custom-select-value--companies
and
custom-select-value--companies-disabled
It's actually the pseudo element I want to style, and the following css works:
.custom-select-value--companies.custom-select-value--companies-disabled::after { // Styles }
It's probably very simple, but I was just struggling to translate that to sass and was hoping someone could help? The following doesn't work:
.custom-select-value {
&--companies.&--companies-disabled::after {
// Styles
}
}
Also, just wondered as I was writing this - what's the main element of a pseudo element called? "Parent" doesn't seem quite right?
Thanks
Managed to get it working by typing the second selector out in full:
.custom-select-value {
&--companies.custom-select-value--companies-disabled::after {
// Styles
}
}
I am using selector to select all elements not having one class:
.list th:not(.foo) {
/* some rules */
}
How can I apply this to more than one class?
.list th:not(.foo), .list th:not(.bar) {
/* some rules */
}
The CSS above will not of course do that, I need something like this pseudo:
.list th:not(.foo and .bar)
Is it possible in CSS and how?
You can use as many :not() selectors as you like.
:not(.foo):not(.bar)
With upcoming CSS4 selectors you can use a syntax like:
:not(.class1, .class2, .class3)
and so on. But browser support isn't good so far. To be able to use it today, you can use cssnext for example.
.list th:not[class*="class"] { }
It will work with all classes, like class1, class2 etc.
Use comma to separate class name can get you want
.list th:not(.class1, .class2)
I'm looking at a css template that includes .myClass a.extra{...} and .myClass a.extra:hover{...} What does the "extra" mean?
extra is the name of a class.
Since you have:
.myClass a.extra{...}
that rule is applying to all the a elements with the extra class which are descendants of an element with the myClass class.
It's the class of the anchor. When the css says something like a.extra, it refers to an <a> element in html like this:
<a class="extra">Contents</a>
This is an example of a more general concept: x.y refers to any element <x class="y">.
In your example, a.extra indicates an anchor tag with a class name of 'extra'.
Extra link!
Chained selectors mean that both belong to the same element. So if I wanted to select a div with the id of "foo" and the class of "bar", I could define the rule in my CSS like so:
div#foo.bar {
/* disco */
}
Whereas using a space to separate (like in your example) would define a child attribute selector:
<style type="text/css">
.myClass a.extra {
/* disco */
}
</style>
<div class="myClass">
disco
</div>
Check out more attribute selectors here.
The a.extra means any anchor element with a class of "extra".
The entire line indicates:
Any anchor element with a class of "extra" that resides under any elements with a class of "myClass"
I'm wondering how can I apply a style to EVERY h2 that DOES have ANY any class attached to it, thus having the effect that the style will NOT be applied on a plain h2..eg..
<h2 class="1"></h2>
<h2 class="2"></h2>
<h2 class="3"></h2>
<h2 class="a"></h2>
<h2></h2>
All the ones with a class should have a style - and just plain h2 should not, (This is a huge site with hundreds of styles)...so any easy way to do this?
There is a method to do it but it's only possible with browsers that support CSS3 :not pseudo class.
h2[class] {
/* Styles for <h2> with a class, regardless of the value */
}
h2:not([class]) {
/* Styles for <h2> without classes */
}
I hope it works!
[Edit] I've made a simple demo for you here - http://jsfiddle.net/fL2sT/
What you're asking for is how CSS works by default.
The correct way to style elements which have no specific class assigned to them is to style the base element, as Ahsan demonstrated above. I don't know why he got downvoted.
h2 { property: value; }
Note that if H2 elements do have classes assigned to them, then that styling may override your base style.
So if you have: h2 { color:#333; font-size:2em; } as your base style, and then apply class="myClass" to it where: .class { color: #000; }, then the base style's color will be overriden (but not the font size). This is the cascade in Cascading Style Sheets.
Another way is to target them conditionally:
div#nav h2:first-child { property:value; }
which gives you contextual control, but again, class assignment will always override base styling, and may also override context targeting if the class application has higher specificity.
Why not simply use
h2[class] { ... }
How do I do a CSS selector that selects a div that has the class of someButton AND current?
.someButton .current { /* select current with the parent div of .someButton, correct? */
Please help me figure this out!
You need to concatenate it: .someButton.current.
With a space, it will be seen as "apply on any element with class .current which is nested in a parent element with class .someButton".
Remove the whitespace
.someButton.current
div.someButton.current { ... }