I want to do something like this .horizontal-nav:not(.horizontal-nav.responsive-nav-enabled)
i.e. I want to apply styles of .horizontal-nav only if the div does not have the .responsive-nav-enabled class. If it has both classes then the styles of .horizontal-nav must not apply. Is it possible?
You need to use .horizontal-nav:not(.responsive-nav-enabled) to get the desired result:
.horizontal-nav {
height: 20px;
border: thin solid;
}
.horizontal-nav:not(.responsive-nav-enabled) {
background-color: red;
}
<div class='horizontal-nav'></div>
<div class='horizontal-nav responsive-nav-enabled'></div>
The problem with your original selector is that it is invalid and rejected by the browser. :not accepts a simple selector while .horizontal-nav.responsive-nav-enabled is a sequence of simple selectors.
Related
if I add a css class to my div, it will be overwritten with v-slot-tradeMatrixLayout. How can I specify this class specifically in my CSS file so that only this is called. The tradeMatrixLayout is given to a VerticalLayout.
This will be examined in chrome
<div class="v-slot v-slot-tradeMatrixLayout">
And this is my CSS file
.tradeMatrixLayout{
margin-left: 15px !important;
}
How can the div call my specifically written class?
The class attribute can receive multiple CSS classes by using their name and separated by a space, as seen here. For your case you can add it like:
<div class="v-slot tradeMatrixLayout">
In this example, you are adding 2 classes: v-slot and tradeMatrixLayout.
if v-slot is overwritting whatever you are trying to set with tradeMatrixLayout, then it means that you have to play with Specificity. In summary, some rules have more importance than others, even if you use !important (imagine you have 3 classes that use !important, which one should be used?). The higher the specificity, the more important is the rule.
The following list of selector types increases by specificity:
Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
Class selectors (e.g., .example), attributes selectors (e.g.,
[type="radio"]) and pseudo-classes (e.g., :hover).
ID selectors (e.g., > #example).
if you want it to have more specificity, either change your CSS to:
div.tradeMatrixLayout{
margin-left: 15px;
}
of add it using an id:
<div id="myDiv" class="v-slot tradeMatrixLayout">
div#myDiv.tradeMatrixLayout{
margin-left: 15px;
}
You can also use javascript to add the class by manipulating the DOM.
function myFunction() {
var el = document.getElementsByClassName("v-slot");
el.classList.add("tradeMatrixLayout");
}
it should be end with your class
[class$='tradeMatrixLayout']{
color: red;
margin-left: 15px !important;
}
Just try above code it will work for you
The .class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of the class.
You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.) character, followed by the name of the class
I don't fully understand what you clearly want though? What you have seems okay?
v-slot v-slot-gewerkeMatrixLayout
This is referencing to these 2 classes, It cannot use the same elements from both as it will be overwritten. But if you have 2 different instructions it should work
You could just specify the class your in your CSS like this
.v-slot-tradeMatrixLayout {
margin-left: 15px !important;
}
Just add another CSS with that CSS class (v-slot)
Like:
.v-slot{
margin-right:5px;
}
.v-slot.tradeMatrixLayout{
margin-left:50px
}
And your html will look like
<div class="v-slot"></div>
<div class="v-slot tradeMatrixLayout"></div>
.v-slot{
border: 3px solid blue;
height: 50px;
width: 50px;
margin-left: 5px;
}
.v-slot.tradeMatrixLayout{
margin-left:50px
}
<div class="v-slot"></div>
<div class="v-slot tradeMatrixLayout"></div>
i have this little problem, i have <span class="a a">some text</span>.
i would like to apply css like this:
.a.a{
color: red;
}
but it does not work, can anyone help me with this?
Thanks!
Specifying the class twice in the markup doesn't make any difference than specifying it just once.
However, from what I have observed, creating a rule with same selector twice, emphasizes it more, (observed in Firefox).
So, with the following rules,
.someclass.someclass
{
color: blue;
}
.someclass
{
color: red;
}
The one with color: blue; takes precedence.
Is there a way to import the styling of a single CSS selector into another CSS selector and add to it or rewrite properties from it.
Let's say:
.original_class{
background:black;
color:white;
}
.overwrite{
#import(.original_class); /* I know this doesn't work */
color:blue;
border:1px solid green;
}
I can accomplish this by just redeclaring the .original_class and assigning new values (since CSS styles are rewritten from top to bottom), but this will replace the attributes of the original CSS class. What I want is to inherit its properties into another class without having to write them again (duplicate).
Not directly, no.
You could do something like this in your HTML:
<div class="original_class overwrite">...</div>
This will have the same effect, but you will have to do this for every element you want styled that way.
There is also the option of using a CSS pre-processor, like SASS, which supports inheritance/mixins.
You can add the .overwrite selector to the first rule by separating it from the existing selector with a comma (grouping selectors), so the selector rule becomes .original_class, .overwrite:
.original_class,
.overwrite {
background: black;
color: white;
}
.overwrite {
color: blue;
border: 1px solid green;
}
Also, when you write:
this will replace the attributes of the original CSS class
there is no such thing as attributes and class in CSS, not with the intended meaning of OOP I guess. There are rules, selector rules (to select HTML id, classes, elements, attributes and other pseudos), declarations, properties and values.
Unfortunately not. At least not without one of those fancy CSS plugin thingies that I wouldn't touch with a mile-long pole...
Of course, there's nothing stopping you having multiple classes on a single element.
You may have multiple classes on an element separated by a space:
<div class="header contaminated">...</div>
and you can target that div using .header.contaminated selector.
That's fine when both classes are directly applied to an element. i want to target an element with CSS that has both styles, but one style comes from the parent:
Example
<div class="contaminated">
<div class="header">...</div>
</div>
Normally i want to style a header as blue:
.header { background-color: #99FFFF; }
But if a div is contaminated then i color the entire background red:
.contaminated { background-color: Pink; }
.contaminated.header { background-color: HotPink; }
Except i don't think the css selector syntax .contaminated.header is valid for "inherited" styles.
Note: The reason i don't think it's valid is because it doesn't work
Is it possible to target an element with CSS if it only contains two classes, and some of the classes are "inherited" ?
jsFiddle sandbox
This is basic CSS - separate the class names by a space, that implies/applies the cascade:
.contaminated .header { ... }
Anything wrong with that?
Cheers
I'm confused as to your question, wouldn't this do it?
.contaminated .header { background-color: HotPink; }
Notice the space, saying "look for an element with a class of .header within an element with a class of .contaminated"
.contaminated>.header{}
will only target element header that are direct children of .contaminated
I have a css class rule:
.test{ text-align:center; font-family:Verdana; }
And i want to create another id rule (I hope It is right calling by "id rule" ):
#divNew1{ color: Red; }
#spanNew2{ color: Green; }
#pNew3{ color: Yellow; }
I have a lot of div elements. I want to pass .test class properties to other elements with only changing css file. That's why i don't want to add class attribute to div elements. The html code below:
<div id="divNew1">Ta ta taaaaa</div>
<span id="spanNew2">Ta ta taaaaa</span>
<p id="pNew3">Ta ta taaaaa</p>
But i want to add .test class properties to #divNew class by using inheritance and i don't want to add class attribute to the div like as above.
Is there any way to do this?
Just include the ID class on the upper declartion, the last declaration for any property wins. E.g. if the first rule had a color: Green;, .test would be green, #divNew would still be red.
.test, #divNew{ text-align:center; font-family:Verdana; }
#divNew{ color: Red; }
I believe the question is, can my "#divNew" CSS rule inherit the properties of the existing ".test" rule so that:
[Psuedo Code]
.test { color: red; }
#divNew : .test { border: 1px solid Black }
... results in an element with an id of #divNew getting both red text and a black border.
And the answer is no - there is no syntax for declaring the inheritance of one rule by another rule - but you can apply multiple CSS rules to one element.
In this example, the element would take the rules for "#divNew" and ".test" and ".another". It would override any conflicting properties with the last rule in your CSS.
<div id="#divNew" class="test another">...
LESS/dotLess allow you to perform additional processing within a CSS file on the server side, using a CSS style syntax. LESS. I'd link to dotLess, but I can't find a functioning link at present (http://www.dotlesscss.com/ is coming up empty for me)
edit
Or T4CSS from Phil Haack
What do you mean by inheritance? If in your HTML #divNew is a child of .test, then CSS properties of .test are already inherited by it (unless you override them by setting specific #divNew properties).
Syntax for adding properties directly to #divNew which is also .test:
#divNew.test {/*properties*/}
Syntax for adding properties to #divNew which is a child of .test:
.test #divNew {/*properties*/}
<div id="divNew" class="test">Ta ta taaaaa</div>
Not sure to understand you, but:
.test{ text-align:center; font-family:Verdana; }
#divNew.test{ color: Red; }