I have the different classes in each page of body tag and I used css for #top div within the body tag
<body class="one">
<div id="top"></div>
</body>
#top{
/*css code here*/
}
I want to use same css instead of class .one something like this:
#top:not(.one){
/*css code here*/
}
more clearly I want to apply the same css for all pages for #top but not to the page which body class is .one
Use the :not selector on the parent, not on the child.
body:not(.one) #top {
/*css code here*/
}
P.S - You should notice this selector have some browser support issues as you can see here.
Related
I can't seem to make a CSS listen to a :hover.
I have the following CSS:
<style>
.hidescroll
{
}
.hidescroll :hover
{
overflow-x: auto;
}
</style>
And html:
<div class="hidescroll" style="width:100%; height:100px; background-color:green; overflow-y:hidden; overflow-x:hidden;">
<div style="width:300%; height:100px; background-color:red; ">abc</div>
</div>
I would expect the scrollbar to appear when I hover over the div. It doesn't. Why? (I tried to add div before :hover but that didn't help either.)
Inline styles have a higher specificity. You either have to say !important on the hover declaration or move your styles away from inline. I'd recommend the latter.
style="..." on the <div class="hidescroll" takes precedence over the separate css rule in the <style> block.
Since you already have a css rule for hidescroll, put those styles in there instead of putting them inline.
<style>
.hidescroll
{
width:100%;
height:100px;
background-color:green;
overflow-y:hidden;
overflow-x:hidden;
}
.hidescroll:hover
{
overflow-x: auto;
}
</style>
<div class="hidescroll">
<div style="width:300%; height:100px; background-color:red;">abc</div>
</div>
It would be better to also put the styles for the inner div into a style rule.
Note — !important was meant to be used the user agents; used by the end-user to be able to override site styles, for example I use it to in my browser (with the Stylebot plugin) to fix font-size and contrast problems to make sites readable)
I have a responsive page with two sections. All elements in right section should be responsive so I used :
#rightSection * {max-width:100%;height:auto}
however any further height styles are being ignored as you see in the code snippet.
I don't want to use !important because I have many inline styles with html codes so I prefer not forcing the styles through CSS. Is there any other way to set heights after height:auto?
#rightSection * {max-width:100%;height:auto}
.mydiv {
width:534px;
height:37px;
box-sizing:border-box;
}
<div id="rightSection">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is invisible because the height is igonred!
According to your code whatever is happening is fine CSS means Cascading Style sheet that means the last rule applies and that to whichever is more specific. So in your case the first rule has higher specifity than the second rule so height:auto is being applied.
Refer link for more details on Specificity.
So in you code you can make the second role morre specific by different ways which you will come to know from the above link. Below is one such example.
#rightSection * {max-width:100%;height:auto}
#rightSection div {
width:534px;
height:37px;
box-sizing:border-box;
}
<div id="rightSection">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is invisible because the height is igonred!
Edit:
As pointed out by #connexo i would suggest not use Id selectors refer this for more details on why.
You can use css classes instead as classes help to make your code more general for example
.outerDiv * {max-width:100%;height:auto}
.outerDiv .mydiv{
width:534px;
height:37px;
box-sizing:border-box;
}
<div class="outerDiv">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is visible now as the rule is more specific.
Hope it helps :)
#rightSection * {max-width:100%;height:auto}
#rightSection .mydiv {
width:534px;
height:37px;
box-sizing:border-box;
}
<div id="rightSection">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is invisible because the height is igonred!
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;
}
On this site https://www.nycofficesuites.com/new/, I want to change the color of the top bar on the homepage only. I have tried this code:
.home .page .page-id-94 .page-template .page-template-template-home .page-template-template-home-php .wood .top-bar {
background:blue;
}
as well as this code:
.page-id-94 .top-bar {
background:blue;
}
Neither work. Thanks for your help.
I checked your website, and there're a huge hoard of classnames on one body element.
Problem: There're spaces in all your selectors.
.class1 .class2 selects an element with a classname of class2 that's the child of an element with the classname class1.
.class1.class2 has no spaces in the selector, so it selects one element with both classnames of .class1 and .class2.
Correction:
.home.page.page-id-94.page-template.page-template-template-home.page-template-template-home-php.wood .top-bar {
background:blue;
}
OR:
.page-id-94 .top-bar {
background:blue;
}
There's a space before the last selector because .top-bar is a child of the body element.
Hope that helps!
Give this a try:
.home header.style-4 .top-bar {
background: #YOURCOLOUR;
}
If it's a single page you could just set the style with !important
<div style="background:red!important;">
<p>Example</p>
</div>
I want to apply some CSS to the last blog-post. The problem is that the last element in the div 'blog-posts' is the same type of element as the 'blog-post' divs.
I've tried:
last-of-type
last-child
HTML:
<div class="blog-posts">
<div class="blog-post"></div>
<div class="blog-post"></div>
<div class="blog-post"></div>
<div class="blog-post"></div>
<div class="f03-456245"></div>
</div>
CSS:
.blog-post:last-child{
//do some css
}
Last element using .class is not possible. In your case you can use nth-last-child property.
.blog-posts div:nth-last-child(2) {
background: #ff0000;
}
DEMO
You may have to do like this:
.blog-posts div:last-child{
//do some css
}
It is assuming div is the element. It applies for anyother element type p , span etc...