Can anyone suggest how I would go about creating a css rule that would vary depending on the body class? This is within a backbone js app used within a mobile app.
At the moment I will have either 'ks3' or 'ks4' for a class on the body tag (as shown below) and i'd like to have .menu class for ks3 & one for ks4
Current CSS :
.menu {
background-image:url(../img/navigation/bg-768x1024.png); // need to set to null if body class has ks4
background-size: cover;
color: #fff;
}
html
<body class="ks4">
<div class="stk">
<div class="shell">
<div class="menu">
<!-- my menu here-->
</div>
</div>
</div>
</body>
So in essence I am trying to do the following in psuedocode..
if (body class is 'ks4') {
use the existing .menu class but set background-image to none.
}
Is this possible using advanced CSS selectors?
Since you set a rule for .menu it applies to all elements with menu class.
Now all you need is to set a rule to override current rule for background image.
body.ks4 .menu{
background-image:none !important;
}
Related
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?
my website scraped information from ebay products and for the description of the product I get all html. Product description has inline styles and when I open the description of the product in my website, products css ovewrite my css
Normal:
And after I opened the product description
Here is anchor style from developer tool
So I need any idea how to separete ebay product css with my css.
One of the methods that I think is to add !important to all my styles, but I don't think this solution is elegant and I want something else. So If you have any suggestion how to solve my issue I will appreciate them.
Perhaps you need to update your css to be more specific with it's selector, for example if you have a HTML structure which diferentiate the container of the Product Description from eBay like this
.leftbar {
float: left;
width: 20%;
background: #ccc;
}
a { /*think of this as default link style*/
color: black;
}
#main div:not(.product-desc) a { /*more specific selector*/
display: block;
color: red;
}
a { /*this one is from eBay*/
color: green;
}
<div id='main'>
<div class='leftbar'>
<a>Hello</a>
<a>World</a>
</div>
<div class='product-desc'>
<a>Description</a>
<a>Product</a>
</div>
</div>
You can use a :not selector to define your main style so it won't be disrupted by the eBay style
The more specific your selector is, then your style will be used. But if your selector is the same, then the last rule from top bottom will be applied. So in the above example, the link inside product-desc color is set to green not black
create a custom inline CSS property that you desire in the element to overwrite the default CSS. here is how you create inline CSS for overwriting anchor properties.
Here how you do:
create the icons/text of anchor inside a element and give inline CSS
<a href="http://www.example.com" target="_blank">
<span style="color: #ffffff !important;" >icons</span>
</a>
A quick test in Chrome shows that the
a:visited * { ... !important}
does override the inline style, but adding the !important back to the span works fine.
<span style="color: #ffffff !important;" >
For understanding it better. Learn here Overwriting Hover in anchor
Overwriting visited in anchor
Blockquote
If you want to remove all exist style and reset it to default you can use:
all: initial;
Basically, I'm creating a dark theme system for my website, and it adds the dark class to the html tag when the proper function is called. I'm using CSS variables like --light-theme-bg: white; and accessing them with var(--light-theme-bg);. How can I style specific elements such as hr based on if that dark class is attached to the html element. How can I do this?
Scoping is your friend. You'll need to add two rules to your CSS. One for the dark theme and one for the light one.
In those rules, you can define a --background var.
All child elements that reference that var will respect it.
.light {
--background: #f9f9f9;
}
.dark {
--background: #191919;
}
.first,
.second {
color: red;
background: var(--background);
}
<div class="light">
<div class="first"> I'm the first div</div>
<div class="second">I'm the second div</div>
</div>
<div class="dark">
<div class="first"> I'm the first div</div>
<div class="second">I'm the second div</div>
</div>
If you want to select an element inside a .class, use the css syntax .class element, so your code would be .dark hr to select it an hr element inside an element with the class of .dark.
As you mention It added "dark" class to the parent html tag. So considering dark as parent class you can use css to all element like
.dark elements(h1/div/p/others)
I have defined this hover for div element
div.MyCSSClass:hover
{
background-color: purple;
}
This is my HTML source:
<div class="
<ul class="MyParentCSSClass">
<li>
<div>
<div>
<div class="MyCSSClass">
<!-- I want to remove CSS hover for this div element -->
I want to remove the hover when the div.MyCSSClass is a child of MyParentCSSClass, So I add this to remove the hover style in CSS:
.MyParentCSSClass div.MyCSSClass:hover
{
}
But it did not work. I still see the same hover style.
Is there a way to remove hover in CSS without me creating a new CSS class for my div tag? I want to keep the same name as I have other CSS property uses the 'MyCSSClass'.
Thanks for the suggestion. I tried
background-color: none !important;
But when I look into chrome, that CSS is being over-written by
.MyGrandParentClass div.MyCSSClass:hover
{
background-color: purple;
}
and the html source is
<div class="MyGrandParent">
<ul class="MyParentCSSClass">
<li>
<div>
<div>
<div class="MyCSSClass">
<!-- I want to remove CSS hover for this div element -->
My question is how my 'Remove hover' css rule is being over-written? I have put "!important" to my rule.
.MyParentCSSClass div.MyCSSClass:hover {
background-color: none;
}
This will overwrite the background color given by div.MyCSSClass:hover. if you are keeping MyParentCSSClass div.MyCSSClass:hover empty as MyParentCSSClass div.MyCSSClass:hover {}, it will not overwrite anything or doing nothing actually.
You need to re-write all the previously added styles to the hover event. In the case you specified, please do the following:
.MyParentCSSClass div.MyCSSClass:hover
{
background-color: none;
}
Background-color : none; is not w3c standard. It will work on some browser but according to w3c standard it's not right way.
So try to use background-color: transparent which will work good on all browsers and w3c can validate your code.
Have fun.
I was googleing this question but could not get any appropriate result.
Is there an option in the script editor to import html classes and ids automatically? So for the following html code example, the css structure below is automatically created:
HTML:
<div class="container">
<ul>
<li></li>
</ul>
</div>
CSS
.container{
}
.container ul{
}
.container ul li{
}
.container ul li a{
}
Some Editors like Dreamweaver create the CSS code automatically when you apply a certain formatting to it.
For example if you select red as font color in a paragraph it adds the respective CSS code.
Depending on how you configure your CSS styles it may be added to a separate file or in the same HTML as a <style> tag