I have this CSS on my page.
img {
opacity:0.4;
filter:alpha(opacity=40);
}
img:hover {
opacity:1;
filter:alpha(opacity=100);
}
I want to have a few images that aren't affected by this opacity. How would I go about accomplishing this?
The best way to do it would be to give it a unique ID and target it separately:
img#theID {
// CSS for that particular image here
}
Method 1
The most popular method to accomplish something like this suggests the usage of specificity. Basically, the more specific the selector is, the higher precedence. Consider this markup
<section>
<div class="container">
<img src="blahblah.jpg" />
<div class="wrap">
<img src="blahblahblah.jpg">
</div>
</div>
<section>
<img>
<img>
If you use
img {
/* Styles */
}
Those styles will be applied to all. But if you used something like this
section .container .wrap img {
/* Different Styles */
}
Those styles will take precedence for that image, because CSS likes the most specific answer you can give.
Method 2
In addition to this answer given by user125697, which suggests using id's as such
/* img#ID - ID can be whatever you want*/
img#hover {
opacity:1;
filter:alpha(opacity=100);
}
And you would impliment it as such
<img id="hover" src="blahblah.jpg" />
Chris Coyier has published a pen about this. To test the results, just remove one of the classes from the box, and you will see that it changes colors. So basically classes are always overridden by IDs
Method 3
Not Encouraged
The final method I know of is to use !important, which overrides every style on the page. No matter what. This is highly disapproved of, because it can create a lot of problems down the road.
Related
I just wanted to know when is neccessary for me to place a div.cssclass when using two css classes together in my stylesheet. I normally troubleshoot by using with and without it until it works which obviously is fine and quick enough but I would be good to know the best practice.
Example:
.cssclass1 .cssclass2 { }
VS
.cssclass1 div.cssclass2 { }
Is it when its not a direct sibling to it, i.e the next class nested in there?
If both those elements are divs, then there is no difference, except that
.cssclass1 .cssclass2 {
is faster than
.cssclass1 div.cssclass2 {
If you'd have let's say:
<div class="cssclass1">
<div class="cssclass2"></div>
<a class="cssclass2"></a>
</div>
then .cssclass1 .cssclass2 { would select both div and a, while .cssclass1 div.cssclass2 { would select only the div.
The difference is Specificity because if you have .cssclass1 .cssclass2, all elements with that classes are affected BUT if you use .cssclass1 div.cssclass2, the only affected is the <div> element with the cssclass2 class.
As Jonjie said, it's about specificity. Here's an example...
div .cssclass2 {
background-color: green;
}
.cssclass1 div {
background-color: blue;
}
div div {
background-color: orange;
}
<div class="cssclass1">
<div class="cssclass2">
hello
</div>
</div>
As you can see, none of the styling declarations are an exact match for our html here. So, what colour should the background be? CSS has a way to resolve this ambiguity by identifying the css that is most specific to the html. There are some good blog posts about understanding CSS specificity.
Does someone know how to use the CSS selector :not() as #some_id:not(.any_class_name)?
The code looks as if it is right, but it doesn't work. Is there another way without the not selector? I couldn't find anything on the Internet.
I am making a web application, which includes more than one page, but several pages have divs with id=some_id. I thought I had to add specific CSS by adding any_class_name one time using the above CSS code solve the problem, but it doesn't work.
I believe that you are reversing the selectors. You have some elements with the same class, but you want to filter out an element with an specific ID. In that case:
HTML:
<p class="someclass">hello</p> <!-- will be targeted by css below, thus green -->
<p class="someclass" id="some-id">hi</p> <!-- will not be targeted by css below -->
CSS:
.someclass:not(#some-id){ color: green; }
/* selects all elements with classname 'someclass',
but excludes the one that has also has an id of 'some-id' */
And as #secretSquirrel pointed out, note the browser compatibility: this selector is not supported by Internet Explorer 8 and older.
This will set all the backgrounds except the ones that has <a></a>:
:not(a)
{
background: gray;
}
I hope this will help you.
Demo
Another way is:
You can override the css. May be you want something like this.
<div id="demo">
<p class="class">This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Your css
#demo
{
color:#0000ff;
}
.class
{
color:#ff0000;
}
Is there a way to mark a CSS rule as less important, such that it doesn't override a subsequent rule even if the first rule has higher specifically? For example, say I have the following in my CSS file:
#inputDiv input[type="text"]{
width:125px;
}
#differentInput1{
width:25px;
}
#differentInput2{
width:500px;
}
The idea I was going for is that all text input fields that are children of the div "inputDiv" get a width of 125px, except for certain specific inputs that get some other width. The problem is that the first declaration overrides the specific item declarations.
I've tried the following:
Append !important to each of the specific widths. Works, but many claim (rightly, I think) that !important should be avoided, and it is rather cumbersome as it must be added to each element with a specific width.
Prepend #inputDiv to each of the specific selectors, i.e. #inputDiv #differentInput1 Again, works, and avoids the issues with using !important, but still cumbersome as it has to be done to each element.
Is there any way to simply say that the items in the first declaration are less important, and shouldn't override anything?
There's no way to do this since it's antithetical to CSS in the same way that !important is -- doing the opposite would be just as abusive. Your only option is to rely on selector specificity. You can write this in a way that is not as cumbersome by using a class for inputDiv instead of an ID, for example.
maybe a way to solve you problem or answer your question you could try something like this
(http://jsfiddle.net/6aAF5/)
<div class="inputDiv big"> BIG</div>
<div class="inputDiv middle"> MIDDLE</div>
<div class="inputDiv small"> small</div>
<p>
<div class="inputDiv"> normal</div>
</p>
<style type="text/css">
.inputDiv {
background-color:green;
width:200px;
height:20px;
}
.inputDiv.big {
background-color:red;
width:400px;
}
.inputDiv.middle {
background-color:lime;
width:100px;
}
.inputDiv.small {
background-color:orange;
width:50px;
}
</style>
and little explanation about the !important
!important in a css file is used to override styles which are defind directly in the html.
this means if you have
<div class="isItImportant" style="background-color:red;width:100px;height:100px;"></div>
<style type="text/css">
/* this changes the styling */
.isItImportant {
background-color:green !important;
}
/* this doesn't change anything */
.isItImportant {
background-color:fuchsia;
}
</style>
(http://jsfiddle.net/6aAF5/2/)
You can avoid these issues by being smarter about your selectors, as others have noted. As a best practice, avoid IDs whenever possible, and try to use just one or two selectors for any given set of styling.
For example, rather than:
#inputDiv input[type="text"]{
width:125px;
}
#differentInput1{
width:25px;
}
#differentInput2{
width:500px;
}
You might try doing this:
input[type="text"]{
width:125px;
}
.differentInput1{
width:25px;
}
.differentInput2{
width:500px;
}
If you need more specificity than that, something like this would also work:
.inputDiv input[type="text"]{
width:125px;
}
.inputDiv .differentInput1{
width:25px;
}
.inputDiv .differentInput2{
width:500px;
}
Ultimately though, you want consistent styling throughout your site, so you shouldn't need to get so granular. You might want to look into OOCSS, which was great in helping me write lighter-weight, more scalable CSS.
http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
http://oocss.org/
Well, there are some ways to achieve what you want to (if you don't want to do a lot of change),
Change your div id="inputDiv" to a class name class="inputDiv", and change your css selector to .inputDiv. This way your 1st declaration won't override your proceeding declarations.
Use LESS or SASS, which allow you to namespace css rules.
And lastly, You can override the (unwanted) styles using jQuery, but it's an unnecessary overhead.
PS: Being descriptive in CSS is rather helpful although it's cumbersome.
I hope this isn't a duplicate, but I'm not sure even how to phrase what I'm trying to do. I have some utility CSS rules for like clearing floats and creating horizontal boxes. What I want to do is something like this:
.clear{
clear:both;
}
#someID > div{
/*apply the .clear class here*/
}
I know I can do this with JavaScript, but I would like to avoid having class="clear" a million times if I can avoid it. I would also like to avoid duplicating the style information in the second selector so I don't have to maintain multiple utility classes.
The .clear class is just an example, my actual classes are more involved.
Really, you're just going to have to use your utility classes like clear throughout your markup, unless you want to do something like this (which is probably not what you want):
.clear, #someID > div
{
clear:both;
/* this assumes you have no other rules here, which probably isn't true */
}
In short, there's not much better you can do, unless you want to use a preprocessor for your CSS, like LESS.
You can't do it in pure CSS. You can do it easily with LESS or jQuery, just use:
$('#someID > div').addClass('clear');.
In HTML/CSS, you can have multiple clases like this:
HTML
<!--If you are using a id and a class:-->
<div id="someID" class="clear"></div>
<!--If you are using 2 classes-->
<div class="someClass clear"></div>
CSS
.clear{
clear:both;
}
#someID {
/* specific style here */
}
.someClass {
/* specific style here */
}
Is there some kind of "not" CSS selector?
For example when I write the following line in my CSS, all input fields inside an tag with class classname will have a red background.
.classname input {
background: red;
}
How do I select all input fields that are OUTSIDE of a tag with class classname?
With current browser CSS support, you can't.
Newer browsers now support it- see Sam's answer for more info.
(See other answers for the alternatives in CSS.)
If doing it in JavaScript/jQuery is acceptable, you can do:
$j(':not(.classname)>input').css({background:'red'});
Mozilla supports negation pseudo-class:
:not(.classname) input {background: red;}
See also: http://developer.mozilla.org/en/Mozilla_CSS_support_chart
Note that the negation pseudo class is in the Selectors Level 3 Recommendation and works in recent versions of Firefox, Chrome and Safari (at least). Sample code below.
<html>
<head>
<title>Negation pseudo class</title>
<style type="text/css">
div {
border: 1px solid green;
height: 10px;
}
div:not(#foo) {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="foo"></div>
<div id="bar"></div>
<div id="foobar"></div>
</body>
</html>
Wouldn't you do that by setting the 'global' background to red, then using the classname to alter the others?
input { background: red; }
.classname input { background: white; }
I would do this
input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
There is no way to select the parent of matched elements with CSS. You would have to use JavaScript to select them.
From your question I assume you have markup that looks more or less like this:
<form class="formclassname">
<div class="classname">
<input /> <!-- Your rule matches this -->
<input /> <!-- Your rule matches this -->
</div>
<input /> <!-- You want to select this? -->
<input /> <!-- You want to select this? -->
</form>
One option is to add a class to a higher element, say the <form>, and write a rule to style all of the inputs of the form. I.E:
.formclassname input {
/* Some properties here... */
}
Or
.formclassname > input {
/* Some properties here... */
}
If you want to select them based on the fact that they are not inside of an element with a specific class, you're out of luck without the use of JavaScript.
I think the closest you can get is to only affect direct descendants with a declaration
This code for example will only affect input fields directly under divs with class "maincontent"
div.maincontent > input {
// do something
}
Inputs are a bit annoying because, unlike most other html elements, there isn't necessarily a way of resetting all the css properties back to their default value.
If the styling is non-critical (ie a nice to have but doesn't affect functionality) I would use jQuery to get an array of all the inputs, check their parents, and then only carry out the styling on those outside that div. Something like:
$('input').each(function() {
if($(this).closest('.classname') == false)
{
// apply css styles
}
});
(By the way, I'm no jQuery expert, so there might be some errors in the above, but in principle something like this should work)