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)
Related
I'd like to get the result below using sass nesting
css
.box {...}
h3.box-title {...}
I tried code like this, but it causes an error.
sass
.box {
h3.&-title {
...
}
}
I'd like to know if there is any way to do this keeping sass nesting?
I know that it's not good to write HTML element on CSS,
but I'm working on a project that I can't modify existing CSS and need to overwrite them.
Try this:
.box {
#at-root h3#{&}-title {
...
}
}
I used the sass interpolation #{} to compile expectedly the value of &, and #at-root to prevent the prefix .box (prevent resulting to .box h3.box-title because we want h3.box-title only - without the prefix .box)
Here's the captured result:
Anyway, I don't think this is a good practice to write sass/scss
.box
and
.box-title
are two different class names. Unless h3.box-title is a child of .box, honestly, there's no reason you should be nesting it.
Also & is used to look for additional class names. i.e.
.box {
&.box-title {}
}
would be
.box.box-title {}
I have tried to combine to classes in CSS, but I end up failing. I used this code:
.container{
.ningbar
}
What I would like to do is combine the items in the ningbar layer with the items in the container layer. Thanks, Phineas.
This would do the job:
.container { /*container rules*/ }
.ningbar { /*ningbar rules*/ }
.container,.ningbar { /*shared rules*/ }
.container, .ningbar { }
Use the same rules for both.
why do you want to combine two classes ? I would make two seperate classes and use them in my controls as below
CSS:
.class1{
/* All styles for class1*/
}
.class2{
/* All styles for class2*/
}
HTML:
<div class="class1 class2"></div>
This way you can add both classes to your controls/DOM elements keeping them seperate in your CSS.
In order to use another styles' for another class, there is LESS, if I can say.
In a nutshell, LESS will help you to maintain more easily, and comprehensible your styles' files. You will be able to add variables, to avoid repetitions of same colors' codes, for instance.
You can view more detail on LESS's website : http://lesscss.org/
But, it's probably a complicated way, to simply add properties from another class.
For Combining two class you can us
.Class1 .Class2 {
//All style for combination of these two classes
}
I have a class in my css called .btn:
.btn {
//stuff here
}
and I am going to create another class, lets say .btn2. I want to be able to inherit the characteristics from .btn into btn2, as I only want to change the color of button 2. Is there a way in CSS for this? Or should I just copy and paste the original stuff into the new class?
I'd suggest:
/* comma-separated selectors: */
.btn,
.btn2 {
/* shared properties */
}
.btn2 {
/* properties unique to btn2 */
}
JS Fiddle demo.
You can do it with dynamic stylesheets. Check out LESS or SASS.
EDIT:
Some additional info at a commenter's request. Here are the official sites. They both have examples on their home pages.
http://lesscss.org/
http://sass-lang.com/
What you can do is this
.btn, .btn2 {
/* Styles goes here */
}
This way, both the classes will share common properties defined in the rule block.
As far as the inheritance goes, something you would like to have..
.btn2 {
.btn; /* Won't work in pure CSS */
}
Won't work in pure CSS, you need to take a look at SASS or LESS
If I have a dozen CSS selectors, and want to assign :hover properties to all of them, I'm used to doing this:
selector, selector2, someOtherSelector, someSelector div {
//some properties
}
selector:hover, selector2:hover, someOtherSelector:hover, someSelector div:hover {
//some properties
}
Typing :hover four times seems redundant. Is there a way to group the selectors like
(selector, selector2, someOtherSelector, someSelector div):hover {
//some properties
}
instead?
Not natively in CSS. By using something like SCSS, you can write:
selector, selector2, someOtherSelector, someSelector div {
// some properties
&:hover {
// some more properties
}
}
If they all share the same hover properties you could create a class that is shared for all that defines your :hover
So you'd get:
allSelectors, selector, selector2, someOtherSelector, someSelector div {
//some properties
}
allSelectors:hover {
//some properties
}
Re-usable classes makes for cleaner and less code.
Sadly, there's not really any easier way of doing what you're trying to do, unfortunately. Unless you want to move the styles to jQuery or something (but that's not a good solution).
I have a css class like:
.foo {
background-color: red;
}
then I have a class specified for a list:
.list1 li {
background-color: tan;
}
is it possible to set one style class to just point to another? Something like:
.list1 li {
.foo;
}
not sure how to articulate that - I just want the .list li style to be whatever I define for the .foo class.
You can use selector grouping:
.foo, .list1 li {
background-color: red;
}
No. The best you can do with "native CSS" is to use a multiple selector:
.foo, .list1 li {
...
}
Otherwise there are preprocessors that can help with this such as SASS.
Not with any syntax like that (and don't confuse a "class" (an HTML term) with a "class selector" or a "rule-set").
Your options are multiple classes, grouping selectors or preprocessing.
You might want to look into a CSS preprocessor such as SASS or LESS. You can define variables that can be used throughout your code. It greatly speeds up your coding when you're familiar with it.
http://sass-lang.com/
http://lesscss.org/
Using SASS:
$darkred : #841c14;
.box {
background: $darkred;
}
No you can't but you override it using naming differnt classes for example
.foo {
background-color: red;
}
.list1 li {
background-color: tan;
}
class ="list1 foo"
Inheritance is, as far as I know, not supported in CSS (2.1 at least)
Afaik, this isn't possible (yet) I hope it will be in the future. I always just copy+paste whatever I want to be the same into the desired selector or put the selector names one after another:
.foo,
.li,
.whatever
{styles}
Maybe someone else has another suggestion.
The above solutions aren't available if you don't have control over how 'foo' was defined.
So, if a JQuery solution is acceptable, just apply the original class to all instances of the new class/context. In this case:
$('.list li').addClass('foo')
to help clarify what is meant by overriding, if you want .list1 li to carry all the styles of foo, but just want to change it's color to tan, i would do this:
<span class = "foo">
<span class = "list1"><!--or whatever name you have for your new style-->
TEXT WITH INHERITED STYLE GOES HERE
</span>
</span>
I've a litte expand #Frank Carnovale solution (without css changing). After page loading:
$(function () {
$('.list li').removeClass('old1 old2 ...')
$('.list li').toggleClass('foo1 foo2 ...')
}
See also Does addClass in JQuery override any existing css class based styles?