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
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 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.
I just wanted to know when is neccessary for me to place a div.cssclass when using two css classes together in my stylesheet. I normally troubleshoot by using with and without it until it works which obviously is fine and quick enough but I would be good to know the best practice.
Example:
.cssclass1 .cssclass2 { }
VS
.cssclass1 div.cssclass2 { }
Is it when its not a direct sibling to it, i.e the next class nested in there?
If both those elements are divs, then there is no difference, except that
.cssclass1 .cssclass2 {
is faster than
.cssclass1 div.cssclass2 {
If you'd have let's say:
<div class="cssclass1">
<div class="cssclass2"></div>
<a class="cssclass2"></a>
</div>
then .cssclass1 .cssclass2 { would select both div and a, while .cssclass1 div.cssclass2 { would select only the div.
The difference is Specificity because if you have .cssclass1 .cssclass2, all elements with that classes are affected BUT if you use .cssclass1 div.cssclass2, the only affected is the <div> element with the cssclass2 class.
As Jonjie said, it's about specificity. Here's an example...
div .cssclass2 {
background-color: green;
}
.cssclass1 div {
background-color: blue;
}
div div {
background-color: orange;
}
<div class="cssclass1">
<div class="cssclass2">
hello
</div>
</div>
As you can see, none of the styling declarations are an exact match for our html here. So, what colour should the background be? CSS has a way to resolve this ambiguity by identifying the css that is most specific to the html. There are some good blog posts about understanding CSS specificity.
Is it possible to add conditional formatting to change class on using hover effect on a div:
.resize:hover {
height: 360px;
z-index: 1;
.font_white {
color: blue;
}
}
.font_white{
color: white;
}
Is it possible to override font_white while hovering div with resize class? These classes are independent div's.
No it's not, not using pure CSS that is.
You can use JS, but without the code of your markup, it's hard to say what the best way is.
(Of course, if the font color is to be applied inside the div you hover, it is doable using CSS only, although not the way you describe it. But I assume you want to trigger style changes across the page by hovering a div.)
There is no generic way to achieve that with CSS.
If you can write a selector that matches both the element that is a member of the resize class and the element that is a member of the font_white class (which you would do using a combinator such as descendant, child or sibling) then you can use the combinator to achieve it.
For example:
.resize:hover ~ .font_white { ... }
would work if your HTML looked something like:
<button class="resize">Hover Me</button>
<section id="first">...</section>
<section id="second" class="font_white">...</section>
<section id="third" class="font_white">...</section>
You would need to select apropriate combinators for your particular HTML.
If you rewrite your CSS, you'll see that your desired effect is possible - and achievable without redefining the style declarations of your class.
Example:
.primary-text {
color: white;
}
.resize:hover {
height: 360px;
z-index: 1;
}
.resize:hover .primary-text {
color: blue;
}
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; }