Consider the following CSS stylesheet:
#start_experiment_button
{
display: inline-block;
color: black;
border: 3px outset gray;
background-color: #CCCCCC;
padding: 8px;
text-decoration: none;
font-family: Arial, Helvetica;
font-weight: bold;
}
#start_experiment_button:hover
{
border: 3px inset gray;
}
#start_experiment_button:active
{
border: 3px inset gray;
}
#start_experiment_button
{
display: none;
}
Notice that the display property of #start_experiment_button is defined twice. Does this serve a purpose? Does the second definition simply over-ride the first, such that the first need not have been written at all? Or do the intervening definitions for hover and active somehow influence when the two display values take effect?
The last rule
#start_experiment_button {
display: none;
}
overrides the first one. Hence the element is not shown at all. Because the element is invisible both :hover and :active are not applied.
Note that as more specific the selector as higher priority the rule has. So if the element was visible the rules defined by the selectors #start_experiment_button:hover and #start_experiment_button:active would have higher priority then the rule defined by #start_experiment_button.
Does the second definition simply over-ride the first, such that the first need not have been written at all?
Yes, and only for the display property. The other properties are unaffected.
Or do the intervening definitions for hover and active somehow influence when the two display values take effect?
No, they don't, because neither of those rules have their own display declarations, and even if they did, those states would be impossible to reach because the element is never rendered.
It's not clear why that last rule exists and why it appears in that spot unguarded by either a media query or a more qualified selector, because with its display: none declaration, it makes all the other three rules redundant by preventing the element from ever being rendered.
Yes it will override..
#start_experiment_button
{
display: none;
}
This code will override your first code, as the code reads from first line to the last while its executed.. hope you got your answer..
Related
I can't seem to change the font-size for the Ionic input. I've tried
input {
font-size: 30px;
}
but that doesn't work. However,
input {
font-family: Times;
}
works, so I don't know what exactly is the problem. I can't even change the height of the input as
input {
height:100px;
}
does not work.
However, when I take out the line in my HTML referencing the Ionic CSS, (lib\ionic\css\ionic.css), my CSS works. I think my CSS should be overriding the Ionic CSS as my CSS comes after it, so what's happening, and how do I fix it?
EDIT:
Even if I put !important, it doesn't work. Interestingly enough,
input {
height:100px; !important
font-family: Times;
}
makes it so that the font doesn't change, while
input {
font-family: Times;
height:100px; !important
}
does change the font.
EDIT2: The problem was with selector specificity:
textarea, input[type="text"]... {
display: block;
padding-top: 2px;
padding-left: 0;
height: 34px;
color: #111;
vertical-align: middle;
font-size: 14px;
line-height: 16px;
}
was overriding it, so I just changed my CSS to
input[type="text"] {
font-size:30px;
}
and it worked!
It is very likely that the specificity stated in the framework is greater than what you are providing in your CSS.
Using dev tools to track down the specific style by inspecting the element should show you how the framework defined its selector.
As some have mentioned, using !importantcould solve this, but it is not a recommended solution as it cheat its way to the max specificity and can't be overwritten later on, except by being more specific with a selector and including the important statement.
You need to put !important before semicolon.
Can I have hand please? I am struggling to over-ride the CSS on the Wordpress Custom Fields Search plugin, which seems to use the same style for search boxes that appear in the widget and the page. If you look at http://www.landedhouses.co.uk/parties/, the white text is visible by the search boxes in the widget but not so visible on the page. Any ideas how to fix this!? Unfortunately adding this to the page's php didn't achieve anything:
<h2>By size and price</h2>
<p style="color:000;"><?php if(function_exists('wp_custom_fields_search'))
wp_custom_fields_search(); ?></p>
Many thanks!
This is the style rule that is causing you problems.
/* searchforms.css line 15 */
.searchform-label {
display: block;
float: left;
width: 200px;
overflow: hidden;
font-size: 1.1em;
font-family: sans-serif;
font-weight: bold;
padding-top: 4px;
color: white;
}
You can do a few things using css. You can make an overwriting rule in the style sheet:
.searchform-label {
color: black;
}
if that doesn't work, you can make a more specific rule:
label.searchform-label {
color: black;
}
or you can in the worst case scenario make an !important rule.
.searchform-label {
color: black !important;
}
As an extension of the above answer (i still cannot comment :( )
Generally speaking, a more specific rule will override the property if the original is not using !important,
so as the original targets .searchform-label, you just need to target something more specific, such as label.searchform-label, and if that doesnt work, include a direct parent element and a > e.g. if the label is wrapped in a P, use p>label.searchform-label
there should rarely be a need for !important, although they should make a !notimportant, for easy override :D
A fellow developer has set the following css rule, which must remain in place.
* {
border: medium none;
list-style: none outside none;
margin: 0;
outline: medium none;
padding: 0;
}
This removes the border from SELECT and INPUT fields and makes them look less than ideal. If I remove the border style in firebug then the fields look normal again. Which css rules must I add to revert back to the default styles set by the browser?
Edit: these are the styles I'm trying to revert to (on my computer):
(source: 456bereastreet.com)
I think what your fellow developer was attempting to do was create his own reset (similar to Yahoo Reset, etc). But since he's declaring * instead of specific elements, it removes the border from everything.
You can work around this though and still get the browser's default border back on form elements by changing the * to your most common elements (sans form elements) - it's a bit ugly, but it does what you're looking for:
a,abbr,acronym,address,b,blockquote,body,br,caption,dd,div,dl,dt,em,fieldset,form,h1,h2,h3,h4,h5,h6,hr,html,i,img,label,legend,li,link,menu,ol,p,pre,small,span,strong,table,td,th,tr,u,ul
{
border: medium none;
list-style: none outside none;
margin: 0;
outline: medium none;
padding: 0;
}
Add these:
select, input {
border: solid 1px; /* or whatever you want */
}
Unfortunately, you need to set the new values. There is no reset value.
If you want to add a border, set the new border style. Or remove the style you posted.
Why does the following anchor tag has text underlined?
.pagerLink {
background-color: #E4F5F8;
border: 1px solid #C0DEED;
text-decoration: none;
}
<a class="pagerLink" href="#">test</a>
Probably because another style block has better precedence than your pagerLink class. Try:
.pagerLink {
background-color: #E4F5F8;
border: 1px solid #C0DEED;
text-decoration: none !important;
}
use text-decoration:none for a in your styles
Ex:
<head>
<style>
.pagerLink
{
background-color: #E4F5F8;
border:1px solid #C0DEED;
}
.pagerLink a
{
text-decoration:none !important;
}
</style>
</head>
<body>
<div class="pagerLink">
test
</div>
</body>
You can use firebug(a firefox plugin) to findout which style is being used for the element now and whether its being overwritten by some other style definition
http://getfirebug.com/
I cant yet leave comments and I respect this is an old question but be extremely careful when using !important in your declarations:
text-decoration: none !important;
You'll probably get away with it in smaller projects but with any non-trivial project that involves collaboration from multiple sources this sort of thing can be incredibly annoying when it over-rides a property I need to set further down the line. Not only do I have to change this to make my fix stick but I also have to check that changing it does not break anything else, which it probably will.
Better is to refactor your declaration or restructure your code so that you dont need to use !important and only fall back to !important when you cant.
To remove underline you need to follow following style code snippet.
.pagerLink{
background-color: #E4F5F8;
border:1px solid #C0DEED;
text-decoration:none !important;
}
Im trying to do a simple :focus effect for all my INPUT elements, like so:
INPUT:focus { border-color: orange; }
This works great, until I add this bit of CSS to the style sheet:
.form_container .col2 INPUT
{
border: 2px solid #CCCCCC;
margin:0px 0px 0px 0px;
font-family:arial;
font-size:14px;
padding:3px;
}
Now once I add the above, the focus effect doesnt work on any input within the form_container class, when I take the above out it works.
I can get the effect to work by specifying the class for the INPUT like so:
.form_container .col2 INPUT:focus { border-color: orange; }
But I dont understand why I have to do this? I want to control all INPUT effects like i do in the first example
if any one can shed some light on this
thx
That's because
.form_container .col2 INPUT
is more specific than
INPUT:focus
In CSS, more specific rules have higher priority, no matter what the order is in which they were declared. Rules that are equally specific (the same number of selectors usually), the rule declared later overrides or adds to rule declared first.
You could specify !important on your border style for the second rule, but it's not supported in all browsers (did I hear IE?)
In your first rule you're declaring the border color. In your second rule you're overriding it. You could try something like
INPUT:focus { border-color: orange!important; }