This question already has answers here:
Including another class in SCSS
(6 answers)
Closed 8 years ago.
I have a certain question about applying styles to an element through another CSS class. To be more specific, lets have a look at following. I have div:
<div class="main"></div>
with some styles:
.main {
background: red;
display: inline;
/* some other styles */
}
and I want to apply .another class to the div, but via its .main CSS.
.main {
background: red;
display: inline;
.another
}
.another {
width: 50px;
height: 100px;
}
I assume that a preprocessor (SASS, Compass, etc.) is needed, but can someone advice if this is possible and what to keep in mind?
Thanks
You can assign multiple class to that div. so you can write like this and can apply class.
<div class="main another"></div>
No preprocessor is needed, you can group classes with .class.another, that's the same thing that css preprocessors does.
You can just add multiple classes in html, like <div class="main another and-other">...</div>. In css, you can just group the selectors, the inline order doesn't matter, but it's recommended to use most used class (main) first, and add more specific classes lower. But the order from top to bottom matters, lower in file the selector is, more important it is.
I've created a jsfiddle from your code, take a look. I've added background color so you see the difference, because width and height does not apply to inline elements.
You can merge the two styles like:
.main.another {
background: red;
display: inline;
width: 50px;
height: 100px;
}
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;
}
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 8 months ago.
How to remove the element background color using browser extension for a online website? I want to remove this color for add this website in OBS?
I've tried this:
main-content wf100 {
background-color: transparent;
}
.main-content .wf100 {
background: transparent;
}
#main-content .wf100 {
background: transparent;
}
main-content and wf100 are two classes for the same element. So, the code will be like this--
.main-content.wf100{
background: transparent;
}
if this does not work, use this !important flag on CSS value.
Example--
.main-content.wf100{
background: transparent !important;
}
I think you need to use !important in end of your code
Example:
.main-content.wf100 {
background: transparent !important;
}
just write like this:
.main-content {
background-color: transparent;
}
if didn't work add !important after transparent
First, none of your selectors are applied. The first and third one aren't because main-content is a class, so you have to use .main-content.
The second one isn't applyed to your element because you added a space between .main-content and .wf100 wich means :
element with wf100 class inside a main-content element.
Without the the space (.main-content.wf100) you specify :
elements with main-content and wf100 classes.
Now your selector is correct, it still doesn't work. Why ? because inline css has the highest priority after !important property that you need to use here.
Because !important has the highest priority, you can apply it to .main-content.wf100 but also .main-content or .wf100.
/* wrong selector */
.main-content .wf100{
background-color:green;
}
/* correct selector, but not enough priority */
.main-content.wf100{
background-color:green;
}
.main-content.second-content{
background-color:orange!important;
}
.another-content{
background-color:yellow!important;
}
<div class="main-content wf100 "style="background-color:#172132;color:white;">wf100</div>
<br>
<div class="main-content second-content" style="background-color:red;">second content</div>
<br>
<div class="main-content another-content" style="background-color:red;">another content</div>
<br>
<div class="another-content" style="background-color:red;">another content without .main-content</div>
If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will "win", and its style declaration will be applied to that HTML element.
Inline Styles - 1000
ID selectors - 100
Classes, Attributes and Pseudo-classes - 10
Elements and Pseudo-elements - 1
So you can use !important for your CSS code.
.main-content.wf100 {
background: transparent;
}
The correct way to do this is to delete the inline css.
I have a div within a webpage I am trying to target with the following code to create a flexbox:
div.my-div-class {
display: flex;
flex-wrap: wrap;
}
div.my-div-class > label {
fl
Originally I had a problem with the User Agent Styles overriding the div and causing it to automatically display block. I fix that per this question by adding the following code:
div {
display: inherit;
}
Which I assumed, perhaps naively, that this would cause the div to "inherit" the styles of what I set to the class.
I check the console, and sure enough see:
div { display: inherit; }
instead of what was there before for the User Agent which was:
div {display: block;}
Which is what I assumed was messing with my style originally.
I tried !important to see if that would at least cause a change and it didn't.
So I'm thinking I don't fully understand the behavior of inherit or how to target this particular div correctly.
Can someone explain this a little bit? I should mention this div is wrapped in a form, and the HTML of that form is like below:
<div id="form-container">
<form id="form">
<div class="my-div-class" id ="the-target-div">
/*Rest of the HTML*/
</div>
</form></div>
Generally you don't really need to target the div tag, you should instead use a class.
If you are creating your own CSS and not using some library, such as bootstrap, it's a good idea to use a CSS reset to make sure you are writing CSS on a clean slate. This is a popular one.
To answer your question, the inherit property sets a css property to inherit the value from its parent. A div tag by default is a block level element, so setting anything to inherit below it will also set it to display: block.
Just target whatever you need to be flex with the class name, such as:
.my-div-class {
display: flex
}
It seems that you didn't copy all of your html code, cos it looks like it's broken in the middle.
If you want to target this particular div you should do it by refering to it's class or id. Property value "inherit" inherits ONLY the property from its parent element that it is set as a value to.
For example:
.parentElement {
display: flex;
background: yellow;
height: 200px;
width: 100%;
}
.childElement {
display: flex;
height: 100px;
width: 70%;
background: blue;
}
.childElement:hover {
height: inherit;
}
<div class="parentElement">
<div class="childElement">
</div>
</div>
In this example when we hover over the child element we are setting height value to "inherit" which inherits the value ONLY for height property, but the width for example doesn't change.
In short: if you want your div to inherit all styles his parents has you should set "inherit" as a value for every property it's parent has.
When I want to apply a certain style to a div (specially using bootstrap 3), I create my own class like this:
.myClass {
width: 30%;
padding-right: 0px;
}
<div class="myClass"></div>
But sometimes the div style is overwritten by the bootstrap classes or another inherited properties (I don't understand completely the inheritance in CSS3), but if I apply directly in the div:
<div style="width: 30%;padding-right: 0px;"></div>
2 ways to force CSS on an element in this case :
You have you custom CSS located in a local .css file : put the <link> tag for this custom stylesheet after the Bootstrap css file.
Set the CSS rule !important after each properties so they will get an extra authority upon others
CSS inheritance
.myClass is less than div.myClass which is less than body div.myClass.
The Bootstrap is using usually more than one identifier. Like .ourClass.theirClass.yourClass which is hard to overwrite. Inspect your element in your browser to see the inheritance and try to overwrite it the css way before using any !important attributes.
The last rule defining a style of the element will be aplied to it.
So if you have various stylesheets in your page, the order of the files should be in the order you want them to be applied. example:
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="secondStyle.css">
Every style rule(not an entire block) that is written in the second file will be the definitive one in the website.
the same rule apllies within files, for example:
.ClassOne {
color: red;
}
... othes styling ...
.classOne {
color: Black;
}
In this case the color in the browser will be Black because it was the last one and it overwrites the first one.
There is another rule that can affect styling - The more specific rule will be the definitive one, example:
.one .two .three {
color: red;
}
.two .three {
color: blue;
}
.one .three {
color: green;
}
<div class="one">
<div class="two">
<div class="three">
some text
</div>
</div>
</div>
Question: In which color will the text show?
Answer: red.
Why? because in the case above, we call the .three element in a more specific way when we declared the red color.
check it here:
https://jsfiddle.net/wxaw3205/
The same example with more elements:
https://jsfiddle.net/wxaw3205/1/
The last way is using the !important declaration, it provides a way for You to give a CSS value more weight than it naturally has.
For the last example, lets assume that we have the same html markup of the example above, which will be the color now?
.one .two .three {
color: red;
}
.two .three {
color: blue;
}
.one .three {
color: green !important;
}
Answer: green.
Link to live example: https://jsfiddle.net/wxaw3205/2/
And just a little tip: never style the element using the style="" attribute, unless you have too! and either the !important.
Most of the time when you have to use them its because you'r stylesheet needs to be reordered.
That's all, I hope it helped you understand.
So I'll have the following markup:
<div id="content-sidebar">
<div class="entry">
</div>
<div class="sidebar">
Sidebar Content
</div>
</div>
It is styled with the following:
#content-sidebar{
float: left;
padding-left: 10px;
position: relative;
width: 580px;
text-align: left;
padding-right: 20px;
background: url(../_images/content-line.gif) top right repeat-y;
}
#content-sidebar .entry{
position: relative;
padding-left: 16px;
}
#content-sidebar .entry a:hover {
color: #5CB414;
text-decoration: none;
}
I also have markup that uses a different styling for the parent div WITHOUT a sidebar (just adjusts the width), but needs the same for the child .entry class.
<div id="content-nosidebar">
<div class="entry">
</div>
</div>
the content-nosidebar id needs some slightly different styling, but the .entry child selector is exactly the same.
#content-nosidebar{
padding-left: 10px;
position: relative;
text-align: left;
padding-right: 20px;
}
What selectors will tell it to use content-sidebar and content-nosidebar with the .entry class without having to use redundant code? Is #content-sidebar .entry, #content-nosidebar .entry{} the best way or is there another way to select these?
Thanks!
If .entry covers more elements than #content-sidebar .entry, #content-nosidebar .entry would, then without knowing the exact structure of your document you'll have to make do with selecting by both IDs explicitly.
Or you could cheat by using an attribute prefix selector, if you really don't want to modify your HTML, but I wouldn't recommend it unless you know what you're doing (it's often cleaner and simpler to modify your HTML to suit your selectors instead):
div[id^="content-"] .entry
The selectors you can use depends on what you want to do.
.entry {} will apply to the class in both containers. Any CSS share between the two should be added in the simple selector, which should be listed in your CSS.
From there, if you want to customize either column, or have CSS that only applys to one column, but not the other, you can use either #content-sidebar .entry{} or #content-nosidebar .entry{}.
If there are other places that you have an .entry class, and you want CSS that applies to both #content-sidebar and #content-sidebar, you can use the combined selector #content-sidebar .entry, #content-nosidebar .entry{}. In this context, it might make more sense to add a common class of .content to #content-sidebar and #content-nosidebar. This would allow you to use a selector of .content .entry, instead of having to shove those IDs into all your CSS.
<div id="content-sidebar" class="content">
<div class="entry"></div>
<div class="sidebar">Sidebar Content</div>
</div>
<div id="content-nosidebar" class="content">
<div class="entry"></div>
</div>
The CSS would make the most sense in the following order:
.entry {
/** CSS common to all .entry elements **/
}
.content .entry {
/** CSS common to all .entry element in all .content areas **/
}
#content-sidebar .entry,
#content-nosidebar .entry{
/** CSS common to .entry elements inside #content-sidebar and #content-nosidebar **/
}
#content-sidebar .entry{
/** CSS specifically for .entry elements inside #content-sidebar **/
}
#content-nosidebar .entry{
/** CSS specifically for .entry elements inside #content-nosidebar **/
}
The reason you build your CSS this was is for
Efficiency - Common CSS is applied globally instead of repeated
multiple times thoughout the CSS
Organization - Common CSS is listed
first, while more specific CSS for specific sections are grouped and
listed afterwards, dispute the CSS specificity of the selectors
making the order irrelevant.
Good luck out there. -Matt