I just encountered the issue, that I cant find out how to overwrite another class' style i.e. Background Color on hovering another class of same div. My example:
<div class="shapeClass bgTransparentGrey"></div>
<div class="shapeClass bgTransparentGrey"></div>
<div class="shapeClass bgTransparentGrey"></div>
the class shapeClass defines the shape, the class bgTransparentGrey defines the bg color. On shapeClass:hover i want to change styles of the bgTransparentGrey class, but only to the hovered element.
Best
Tassilo
You cannot edit the attributes of a class on the fly with Javascript. You would need to write an additional class that you add that overwrites the others styling.
$('.container-styles').hover(function(){
$(this).addClass('overwrite-styles');
}, function(){
$(this).removeClass('overwrite-styles');
})
.container-styles {
background-color: red;
height: 100px;
}
.overwrite-styles {
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container-styles"></div>
You can use this selector which will only affect elements which have BOTH classes:
.boxElement.bgTransparentGrey { ... }
If you place that somewhere BELOW/AFTER the rules for the single classes in your stylesheet, settings in it will overwrite the previous settings.
(note: there is no space between the classes, therefore it only applies when both classes are assigned to the same element)
Related
This question already has an answer here:
How to prevent CSS color property applied from parent class to child classes
(1 answer)
Closed 4 months ago.
How do I style .parent with color redwithout styling .child?
One solution would be to overwrite the child element style, but in the real world scenario, the child element will have many complex styles and I do not want to touch them, or overwrite these styles, it would be very risky.
What I want is to add the styles only to the wrapper element. In the real world these two elements will be <table> elements
<div className="App">
<div class="parent">
Parent
<div>
<div className="child">child - don't style me</div>
</div>
</div>
</div>
This is how I solved it:
https://developer.mozilla.org/en-US/docs/Web/CSS/all
.wrapper {
color: red;
}
.child {
all: initial;
}
There are other variants, such as revert-layer
This may be the best way to not inherit styles from specific cascade style layers without having to depend/know what are these styles to avoid having them overridden.
Working example: https://codesandbox.io/s/sharp-goldstine-9hongm?file=/src/App.js
In case you want to reset the property in child, you can use unset.
Eg:
.parent {
color: red;
}
.child {
color: unset;
}
I have a class mainText, it stores the settings for the font, its size, color, etc.
In the first block, everything suits me, but in the second block, all the parameters are repeated, but the color is different.
What is the right thing to do in this situation?
Create a new class and duplicate all properties in it?
Use style on every element of the second block?
I don't understand why classes can't be inherited in css like
.secondText : mainText{
color: white;
}
Normally, you would give both elements the same base class and your second item the additional class:
<div class="base">
I am a div
</div>
<div class="base white">
I am a div, but white
</div>
For the css part
.base {
//base config
}
.white {
color: white;
}
There is no explicit class inheritance in css, yet you could look into mixins in scss or scss overall, because it provides some features css does not have. Hope this could help!
you could use the smame one and add a second class to change the color with high priority.
HTML:
<div class="firstText">Text</div>
<div class="secodText">Text</div>
.firstText, .secondText{
color: black;
:
:
:
}
.secondText{
color: white !important;
}
or you could place the css in the HTML code. for example:
<span class="firstText" style="color: white;">Text</span>
for more info check: Can a CSS class inherit one or more other classes?
I have the following code:
<div class = "badge">
<div class = "badge-header">
</div>
</div>
What's the proper way to style badge-header in css?
Is it
.badge .badge-header {
}
or
.badge-header {
}
also how do we structure our css names? How do we structure our divs and what selectors should we use for each above?
If you have a div inside a div, what is the naming convention that we should stick to in CSS?
Both
but the first will apply the style only when the "badge-header" is inside of a "badge"
in the second will apply for all "badge-header" elements.
See example: https://jsfiddle.net/6bvLtqLw/
CSS
.badge-header{
color:blue;
}
.badge .badge-header{
background-color: yellow;
}
HTML
<div class="badge">
<div class="badge-header">
inside
</div>
</div>
<div class="badge-header">
outside
</div>
Both work
.badge .badge-header {
}
above one applies style to those elements with class '.badge-header' AND are under elements with class '.badge'
.badge-header {
}
and the above one applies style to all the elements with class '.badge-header' regardless of element's position in DOM.
Both
but the first will apply the style only when the "badge-header" is inside of a "badge"
.badge .badge-header {
}
in the second will apply for all "badge-header" elements.
.badge-header {
}
The first variant obviously will only style .badge-header if used in the context of a .badge. The second will apply to all .badge-headerregardless of their context.
If you are certain .badge-header will never need to be used outside of .badge, you go with variant two as it is shorter and more concise.
If it might be useful to reuse the .badge-header in different context than only .badge, then use *both variants. Put all styles that all .badge-header have in common in .badge-header { ... }. Put the context-dependent styles in .badge .badge-header { ... }.
I only want to select the element if it has one class and that class is 'foobar'.
<style>
.foobar {
/* only apply to an element if the element has a class and the only class is 'foobar'. */
background: black;
color: white;
}
</style>
<div class="foobar">i should be selected</div>
<div class="foobar ipsum">i should not be selected</div>
I know I could select it with adding a style for .foobar.ipsum { do one thing } and .foobar { something else } but I don't have control over the additional classes. Basically when the element has only the foobar class, I know it's my element and coming from somewhere else. This is what happens when CSS Library worlds collide. I know that there are deeper issues to resolve here but this is stumping me right now.
The simplest way with pure CSS is to use an attribute selector:
[class="foobar"] {
/* only apply to an element if the element has a class and the only class is 'foobar'. */
background: black;
color: white;
}
You may not have control over the other elements, but if you have control over yours and you can modify its class attribute, mayabelle makes a good point about assigning your element its own special class and selecting by that class instead. That way you explicitly state which element is yours rather than going by the assumption that not having additional classes means it's yours.
You will need to use an attribute selector:
[class="foobar"] {
background: black;
}
http://jsfiddle.net/dA2dp/
If it's "your element", can you apply an additional class to it? Then you can select using that:
<style>
.foobar.yourClass {
/* your css */
}
</style>
<div class="foobar yourClass">i should be selected</div>
<div class="foobar ipsum">i should not be selected</div>
Two parts to my question:
1) Is there a way to inherit another control's attributes and styles in CSS? Assume the controls have no parent/child hierarchy and can be completely different control types:
IE:
#MyFirstControl
{
width: 100px;
}
#MySecondControl
{
width: MyFirstControl.styles.width; /* This doesn't work */
}
2) Assume a Label tag is a child of any other tag. The width attribute will neither work with "inherit" nor "auto". What's wrong?
IE:
<style>
div
{
width: 100px;
}
</style>
<div>
<!-- This label does what it wants for width. It's not the width of the containing div -->
<label style="width: inherit">Some Text</label>
<div>
Part 1: you want to use class names, not ids, to control the styles:
.control_a {
width: 100px;
}
<blah id='MyFirstControl' class='control_a'/>
<blah id='MySecondControl' class='control_a'/>
This lets you share styles across any number of tags. Also, keep in mind, you can use more than one class name on a single element:
.control_a {
width: 100px;
}
.red { background: #f00; }
.blue { background: #00f; }
<blah id='MyFirstControl' class='control_a red'/>
<blah id='MySecondControl' class='control_a blue'/>
This lets you select many different sources of style for a single element.
There is no way to inherit CSS "objects". You can inherit styles from tags inside other tags, but it is the tag inheriting and not the style itself. If you place a tag inside a tag with another style, it will inherit from that style.
It might be interesting if CSS styles were treated as objects, as you could avoid a lot of coding, but since you can create a class that can be applied to disparate types of objects, and even apply multiple classes to a tag, it is more interesting than necessary.
I am not sure about the second question, but I would imagine it has to do with the fact you are applying to a tag name, and not using a class or id. I would have to play with it some more to see if I can figure something out.
1) Since CSS doesn't allow for self-reference you could have common aspects of two separate elements specified in the same style:
#MyFirstControl, #MySecondControl
{
width: 100px;
}
2) If my IDE and browser are to be believed, inherit is not a valid value for width in that context but I'm not sure why. That might be why your example doesn't work.