I want to prevent this CSS selector from being applied to all elements in the page:
input {
color:red;
}
This will make the text red for <input>s of every type, but I want to exclude one input from this without changing the selector or style of this CSS rule. The element should have the default style (how it is when you have no css on the page).
You can use the not selector. Since an input field should have a name, you could exclude it by using:
input:not([name="exludeme"]) { }
This method won't work in IE8 and earlier versions. To support ie7 and ie8 too, you could use the attribute selector. In this case you have to reset the field:
input[name="exludeme"] { /*add all your reset styles here*/ }
add an id for the different one and apply it just for him, and to make sure that no other css will overwrite the css you choose use !important
html:
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box" id="diff"></div>
css:
div.box {
background-color:red;
width:50px;
height:50px;
position: relative;
}
#diff{
background-color:black !important ;
}
check this: http://jsfiddle.net/y32Wv/
note: !important is optional, depends on the selector position inside the file, but in cases where it might be overwrite by other css rule (for example if someone change the order of the css rules) it will stop working right, and !important will prevent it from happening.
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)
consider following HTML and CSS:
I have the second element background set to red with inline styling. How can I style the element with the background:red? I know I can do :nth-child(2), but it is dynamicly different each time?
<div class="titleBox">
<button>Click meh!</button>
</div>
<div class="titleBox" style="background:red">
<button>Click meh!</button>
</div>
<div class="titleBox">
<button>Click meh!</button>
</div>
.titleBox {
width:200px;
height:200px;
float:left;
border:1px solid;
opacity:.5
}
So.. if style="background:red", make the opacity equal 1
thanks! http://jsfiddle.net/kM27C/
Just check whether the attribute exists
Doesn't work properly in IE, but it does if you just check for the existence of the style attribute:
.titleBox[style] {
Exact matching attribute selector
Use the attribute selector:
.titleBox[style="background:red"] {
Demo-fiddle (http://jsfiddle.net/Empgz/) works fine for Chrome, but not for IE. Apparently IE parsed the style, adds some formatting, and then requires the selector to follow that formatting. I inspected the element, saw style="background: red;" (with space and semi-colon), so I tried this, which works in IE:
.titleBox[style="background: red;"] {
So, you could add both to your CSS, so it matches any:
.titleBox[style="background:red"],
.titleBox[style="background: red;"] /* For IE */ {
/* properties go here */
}
It's dirty, of course, but if you cannot change the HTML, you'll sometimes have to do something like this. If you can change your HTML, remove the inline style and change it for a class.
More special attribute selector (starting with or contains)
There is also the ^= operator, using which you can check whether an attribute starts with a value:
/* Any background setting */
.titleBox[style^=background] {
opacity:1;
}
Demo: http://jsfiddle.net/g7SZ5/1/
See also The Skinny on CSS Attribute Selectors on CSS-tricks.com for more of such operators.
Hope you can help me with this CSS trick.
Basically what I need is this kind of CSS
if 'container' has sibling 'mySibling' {
#myDiv{
}
}
if 'container' has no sibling {
#myDiv{
}
}
For this HTML
<div id="mySibling"></div>
<div id="container">
<div id="myDiv"></div>
</div>
sibling sometimes will not be present, and I need different css for myDiv in these cases
Any help would be appreciated, I tried doing + and ~ selectors but I don't think I have proper logic.
You can do something like this:
#mySibling + #container #myDiv {
background-color:blue;
}
Here is a fiddle showing it off: http://jsfiddle.net/Lzq3S/
Note, I've changed the ids to classes in the fiddle just to show the two sets of div elements, but you get the idea...
This breaks down to myDiv that is a child of container that is a sibling of mySibling.
First off, make sure your html is correct; in your example, you forgot to specify whether you're using an id or a class! Possible options for your html:
<div id="container">
<div class="mySibling"></div>
<div class="myDiv"></div>
</div>
or
<div id="container">
<div id="mySibling"></div>
<div id="myDiv"></div>
</div>
For the sake of your example, we'll use id's, even though some would say it's better practice to use classes
Now for the CSS.
The + and ~ selectors operate in slightly different ways. The + selects adjacent siblings, while the ~ selects all siblings. Because CSS doesn't handle logic quite the same way as actual programming languages, you can't check to see if a container holds a certain element before applying styles, but you can use the sibling selectors to style elements that are next to certain other elements.
My suggestion:
.container #myDiv {
/* Your styles for #myDiv */
}
.container #mySibling + #myDiv {
/* Your styles for #myDiv it is next to #mySibling.
Will override the styles a */
}
You can check out an example here: http://jsfiddle.net/8r2TZ/. Note, I specified "myDiv" as a class, because I used it more than once, and my CSS reflects that.
If you do need to have a CSS rule for each case without relying on overriding, it's still possible, since there's a selector for elements with no siblings:
#mySibling + #container > #myDiv {
}
#container:only-child > #myDiv {
}
(You can even achieve compatibility with old IEs by using :first-child in lieu of :only-child since #mySibling comes first.)
I have twp elements inside my Div,both have same class name. I want to hide my first element with the class name .cart. I am using the below code.
.component-bottom .component-basket + .cart{
display:none;
}
<div class="component-bottom">
<div class="component-basket">
<div class="cart">
</div>
<div class="cart">
</div>
</div>
</div>
Am I using the correct code?
You can use a direct child selector for the .cart element:
.component-bottom .component-basket > .cart
{
display:none;
}
Now you only want the first element of this selector. There isn't an original selector for this, but you can make a overwrite selector for this.
You can overwrite all but the first one ElementA ~ ElementB:
.component-bottom .component-basket > .cart ~ .cart
{
display:block;
}
This search for all .cart elements inside .component-basket where ANY previous adjacent sibling is .cart. The first of the element doesn't have a previous sibling of this class, so it would not be selected.
This is called a general sibling selector.
jsFiddle
This should support IE7 and above:
Note Requires Windows Internet Explorer 7 or later.
source: http://msdn.microsoft.com/en-us/library/ie/aa358824(v=vs.85).aspx
an easier solution commented by #jrConway:
Make it display: block by default and use:
.component-bottom .component-basket > .cart:first-child
{
display: none;
}
Example
Note that this only work when you use ONLY .cart as child element. Whenever an other class is at the first 'place' it will not work.
Using adjacent sibling selector won't work here, as your element is nested inside .component-basket and hence it fails.. Simple way is to call a class on the element you want to hide, if you cannot change the DOM than you can use first-child or nth-of-type(1)
.component-bottom .component-basket div.cart:nth-of-type(1) {
display:none;
}
Demo
As #Vucko already commented, nth-of-type() is a CSS3 spec pseudo..
Hence if you want to support legacy browsers, you can use Selectivizr,
this will save you a lot of classes/ids.
Stick this in your CSS file:
.hide {
display: none;
}
Then add that class to whatever element you want hidden like so:
<div class="component-bottom">
<div class="component-basket">Foo</div>
<div class="component-basket cart hide">Foo</div>
</div>
The advantage of this method is that you get to re-use that "hide" class anywhere you want.
As understood, check this might help
CSS
.cart{
display:none;
}
.component-bottom .component-basket
{
//some common properties
}
HTML
<div class="component-bottom">
<div class="component-basket cart">component-basket Hidden div</div>
<div class="component-basket">component-basket visible div</div>
</div>
This will hide the div with the cart class (the First div)
Thanks,
Dhiraj
I have a div to which i appy a css class.Now in css class heigh is decalred as x px but i want my div to be of y px.How can i overide hight paramater of css without changing css.
<div style="height: 80px"></div>
The browser assigns the styles with the highest specificity to the elements. As you can read here 'style' has the highest specificity.
You can override specificity by using the !important declaration.
There are several ways to override the value of a CSS attribute defined in a class.
This is really a huge topic, though -- so if you really want to understand this stuff, start here with a tutorial on CSS Specificity.
You need to change the CSS to overwrite it - either use the cascade to give it a new value, or add an inline style attribute which has precedence over external styles declarations (watch for !important).
CSS declarations cascade. Meaning you can attach additional rules to other CSS classes and assign both to an element:
<style type="text/css">
.style1 {
color: red;
height: 100px;
}
.style1.style2 {
height: 200px;
}
</style>
<!-- This DIV will have a height of 200px and red foreground color -->
<div class="style1 style2"></div>
use inline css with !important tag
<div class="yourclass" style="height:ypx!important">