As I understand it, a class should take precedence in styles over the element styles. I've tried to style button, input[type=button], and input[type=submit] and noticed that with the input (button and submit), the border style from the element would take precedence over the border style for the class. I did not notice this behaviour, however, on the button element.
Here's an example demonstrating the situation:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
input[type=button], button {
border: none;
}
.class {
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" class="class" value="With class" />
<input type="button" value="Without class" />
<button class="class">With class</button>
</body>
</html>
The above renders like this:
I've noticed the same behaviour in Safari, Firefox, and Chrome.
Am I doing something wrong? Have I misunderstood specificity in this case? Is this specific to border only?
You're not comparing apples to apples. Attribute selectors have a specificity of 0,1,0 just like classes. However, element selectors have a specificity of 0,0,1, which makes your first selector of input[type="button"] have a specificity of 0,1,1 which is greater than 0,1,0.
http://www.w3.org/TR/CSS2/cascade.html#specificity
If you wanted them both to have the same specificity, you should use:
input.class
input[type="button"]
-or-
.class
[type="button"]
An attribute selector + the element selector have a higher specificity than a simple class selector.
Possible fix:
.class, .class[type] {
border: 1px solid red;
}
this way you can apply the class "class" to any element with a type specified and achieve the results you wanted.
Related
Lets say I have a code something like
<input type='text' />
<br />
<iframe>
<input type='text'>
</iframe>
and a style
input[type='text'] {
border: 1px solid black;
}
and I wanted the styles to be applied only to elements outside the iframe. How would I be able to achieve it? I was actually looking at the css :not selector but I am confused on how I should use it. I'd like to achieve something like
input[type='text'], input:not(iframe) {
border: 1px solid black
}
or Apply styles to all input of type text BUT NOT to input of type text inside an iframe.
It's not possible to select elements outside some element with CSS.
You have to create a class with the desired style definition and apply it to all inputs individually.
The :not selector can be used to select ALL elements but the one specified as argument e.g: :not(p) will select all element from the page except paragraphs.
input[type="text"]{border: 1px solid #000}
iframe input[type="text"]{border: none}
It should work as listed. Iframes are isolated and should have their own styles, are you including the same style-sheet on both pages?
The W3C Recommendations defines the ability to select any anchor which has a defined class by using A[CLASS]{/*Code*/}, but is there an antecedent?
Can I select all anchors that do NOT have a class?
My instinct is to use A[~CLASS]{/*Code*/}, but that isn't documented, and A[CLASS=]{/*Code*/} selects all anchors which have a class name which is an empty string (for instance, <A CLASS="" HREF="http://example.com/">This anchor has a class, but it's empty.</A>).
Example usage
In this code, I only want classless links to be green.
<HTML>
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="http://example.com/externalUneditableStyles.CSS" />
<STYLE>
A.deadLink{
color:#FF0000 !important;
}
A{
color:#00FF00;
}
</STYLE>
</HEAD>
<BODY>
This link is red, as specified by the CSS above.
This link is green, as specified by the CSS above.
This is a link to a child page, and is styled by external uneditable CSS. That CSS doesn't specify a color, so it is green, even though that might not be the intended effect.
</BODY>
</HTML>
Use something like this:
a:not([class]) {
/*some styling here*/
}
Little demo: little link.
That's exactly what cascading is for, if you do:
a { color: #000; } /* this targets all anchors */
Then after this in your stylesheet you can do
a.classname { color: #ffcc00; } /* to override the color for the once with the classname class defined. */
I hope that's clarifies your question.
Try to play with the .foo:not(.bar)-pseudo selector. I also advise you not to code tags in caps. I believe it is allowed in HTML5, but not in XHTML. Even so, the practice is frowned upon.
Hello,
I have seen a strange behavior while using CSS HTML selector and class selector.
in HTML file I have this code:
<div class="content">
<h1>Registration Form</h1>
</div>
And in Css file I have:
.content
{
margin:auto;
width:600px;
border:solid 1px black;
background-color:White;
padding:10px;
}
h1
{
color:Gray;
font-size:18px;
border-bottom:solid 1px orange;
}
Above code works perfectly.
When I changed h1 HTML selector to Class selector by writing .h and h1 class="h" STILL it worked perfect.
BUT
when I changed .content class selector to div (ie I converted class selector of div tag to DIV HTML selector ITSELF) then the output changed.
It did not show me the text Registration form at all and showed horizontal lines above and below the area where Registration form text would be present.
why is this strange behavior?
Does it proves that class selector and HTML selector behave differently even if applied with SAME style rule effect?
A class selector is more specific than a type selector.
When you change the type selector to a class selector, the first selector still has precedence, just because it comes first.
When you change the first class selector to a type selector, the second selector becomes more specific, and takes precedence.
I have the following stylesheet:
/* MyStylesheet.css */
.MyForm .MyInput fieldset { border: 2px solid grey }
And then the following HTML code:
<div class="MyForm">
<div class="MyInput">
<fieldset>
<style type="text/css">
.MyInnerFieldsets fieldset { border: 0 }
</style>
<div class="MyInnerFieldsets">
<fieldset>
</fieldset>
<fieldset>
</fieldset>
</div>
</fieldset>
</div>
</div>
All fieldsets are receiving the 2px solid grey border from the external stylesheet. I thought the nested fieldsets would receive the 0 border from the embedded style, since the selector ".MyInnerFieldSets fieldset" takes precedence over ".MyForm .MyInput fieldset". I tested this in Firefox 3.6.8. Is this the expected behavior or is this a Firefox problem?
Thanks
The selector
.MyForm .MyInput fieldset
has a greater specificity (is more specific) than the selector
.MyInnerFieldsets fieldset
A more specific selector overrides a less specific one. Read about specificity and how it's calculated here.
To solve it, make your second selector more specific (such as .MyInput .MyInnerFields fieldset), or make the first one less specific (.MyInput fieldset).
.MyForm .MyInput fieldset { border: 2px solid grey }
This rule has 2 classes specified, so it's more specific than the latter rule. Simply make the latter rule as specific or more specific by prepending it with the same class name.
i am using a definitive style for my tags. now there is one tag that i do not wish to appear that way. how do i do it?
Give that one tag an ID, and then make a style for that specific ID. It will override the style you set for the "a" tags.
First, figure out the class or id of the element you want to change the style of using tools like firebug. Once you have found its class or id, search for it in the style sheet and modify the style as you like. If it still does not work, try appending the !important to your style, for example:
.myelement
{
color: #ff0000 !important;
font-size: 14px !important;
}
The !important will override any pre-defined styles.
You can't always reliably "unstyle" an element. For some style properties setting the value to auto, default or none will work:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style>
a { background: pink; }
a.normal { background: none; }
</style>
</head>
<body>
<p>link1
<p>link2
<p>link3
</body>
</html>
But not for example color. Replace background in above example by color. It won't work. You'll really need to force the color yourself, e.g. color: blue.