I'm working on a site for a client that wants to use a specific background color site-wide EXCEPT on one page that's basically used as a separate 1-page website with unique content & styling.
My question is this... how can I apply a CSS style to all BUT a specific page ID?
My CSS currently looks like this:
.et_section_regular, #main-content {background-color: #F5EFE5 !important}
The !important is there because I'm having to override the themes default background color to begin with. I've tried using the following not: selector (referenced here) with no luck:
.et_section_regular:not (.page-id-714 .et_section_regular), #main-content:not(.page-id-714 #main-content) {background-color: #F5EFE5 !important}
Is what I'm trying to do even possible?
DEMO
You cannot choose selectors that are above the selection where you apply :not()
An alternative is to first mention parent selection where your page id is applied then target the inner div's - Check the demo.
CSS:
section:not(.page-id-174) .et_section_regular,
section:not(.page-id-174) #main-content{
background-color: #F5EFE5 !important
}
Note i am using section tag just for the DEMO but you can use body tag - where i assume you have your .page-id-174 applied
Related
I've seen a couple of posts about how to set a title to the MeanMenu jQuery Responsive menu plugin but they do it by editing the js. I was wondering if it's possible to do it through css using :after? I've tried but failed dismally.
It is possible to add text using CSS :after. See Snippet. This is about all of the help I can provide without seeing the actual code you are using. Keep in mind when using :after that the pseudo-element that gets inserted into the html is contained within the element that has the :before or :after applied to it. So, the nav:after pseudo element will be contained in the nav element "after" the rest of the child elements.
nav:after{
display:block;
content:"This is text inserted using :after";
clear:both;
}
<nav><!-- Empty element that gets content added by using :after --></nav>
EDIT: Added screen shot. It may not be working for you due to the specificity of your selector or the location in which you are declaring the styles in your css file. You can try greater specificity by using something like this:
.mean-bar > nav.mean-nav:after {
display:block;
content:"This is text inserted using :after";
clear:both;
color:white;
}
I have a popup that comes up over a blanket div that greys out the entire screen, but I don't like its positioning. So I tried to manually enter left: and top: elements into my CSS, but when I look at Chrome's console, there's this element.style {} that's overriding my code.
I've searched my CSS file for element.style and for 597px and 794px and I don't get hits on any of them.
What is this, and why does it have the values that it has?
element.style is a part of your browser devtools that indicates the inline style of the element which has a higher specificity value than any CSS selectors.
That inline styles may be added by a JavaScript code, if so, you can override that declarations by using !important keyword within your stylesheet (e.g. left: 610px !important).
element.style refers to inline styles on the dom element. For example:
<p style="color:#cc0000;">Foo</p>
the color of that paragraph would show up under element.style.
You can fix with your css by doing this:
#popUpDiv[style]{
left:610px !important;
top:0px !important;
}
HTH
-Ted
That's probably manipulated and set by javascript (either that or you edited the element.style{} rule yourselves on the developer tools console).
Look for javascript code that changes the display, top and left properties of #popupDiv
It is the style that you have in the HTML file.
try to delete or change the style in HTML.
I need to hide 3 icons in a page where I don't have access to html but where I can modify CSS file.
The html code is:
<img class="color_box" title="Annotations" src="http://www.site.com/images/notice.png">
<span class="with_tooltip" title="This is a message"></span>
<img class="color_box with_tooltip" style="background-color:#FFFFFF;" src="images/clear.gif" title="White">
I tried different combination such as :
.color_box with_tooltip{
display:none;
}
or
.color_box, .with_tooltip{
display:none;
}
but none of them allow to hide all icons. Some are hidden and some others no according how I change my code..
Any suggestions please ?
CSS rules are applied via a specificity level. Rules that are more specific can trump those that are less specific.
So you may have a style like
#id .yourClass {something...}
That is trumping your .yourClass declaration alone.
A way around this is to use the !important flag. Try this:
.color_box, .with_tooltip {display:none !important;}
!important is typical a 'last resort' as it can make future CSS updates a pain, but the one place it is useful is when you have to modify an existing site via CSS only and simply have to strong arm some of your changes.
Try adding the !important attribute to your second selector listed above. It could be that there are other styles in place that are overriding the hiding.
I created a very simple JSFiddle that has this working without using the !important clause. You can remove the CSS and add it again to see it in action:
.color_box, .with_tooltip {display: none !important;}
i have a problem to override the css in content page div tag .
I'm using nested masters.So in both master pages i used so many div tags with same css theme.
But i want to omit css style for one particular div tag in content page.
Thanks in advance.
If you've defined styles to div { ... } in your CSS, then you can't simply 'disable' them on a new div unless you explicitly redefine them to the default. If all you div styles are declared via class or id attributes, then using a bare div will have this same effect.
Example, bad CSS. This can't be overridden without explicitly giving your target div a class or id and redefining font-size.
div { font-size: 23em; }
Example, better CSS. If you define all your div CSS with classes and ID's then when you want default styling just use a unclassed, un-ID'ed div.
div.reallyBig { font-size: 23em; }
Without seeing your original markup its hard to be much more specific. You may need to reassign styles / classes / id's for your desired effect.
You can give the div an ID and a style of its own using an id selector (#). You can't disable CSS for a specific instance of a tag.
I have got a CSS division called home which has got certain attributes with an action for hover for the anchor tags inside the home division like this:
#home a:hover
{
background-image:url(images/template_03_1.png);
position:relative;
top:3.5em;
left:0.5em;
}
Now, what I want to do is access the 'home' id's attributes inside the block defined above so that I change the properties of the home division whenever some one hovers on an anchor tag inside the home division. I know this is very easily possible in JavaScript but is this possible using CSS only.
Thanks,
niting
Am I correct if I assume you want the following?
#home a:hover
{
#home.background-color: #fff;
}
If so, then: no. Not without JavaScript and not even with CSS3. You cannot edit an others rule's properties.
Recursion is also not possible, as you always style that what was selected last in the rule, so typing #home a:hover styles the anchor if hovered, #home .class styles anything that has class="class" and is a decendant of #home.
In other words, recursion with CSS-selectors is not possible (or I don't know about it...)
You could try setting the hover on #home itself, but that won't work in IE(6). Unfortunately, you can't style a parent based on a child's pseudo-class. Javascript is great for this.
If you have exactly one <A> in your <DIV> then maybe you can style your <A> to have the same dimensions like the surrounding <DIV> and give the <A> the desired background.