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?
Related
I'm trying to visually identify my iframe for users navigating with the keyboard e.g. tabbing
From what i can tell, only :hover has an impact
iframe { border: 1px solid #fff; }
iframe:hover { border: 1px solid #000; }
When trying to use :focus or :active they have no effect:
iframe:focus, iframe:active{ border: 1px solid #f00; }
How do we let visitors know they have tabbed to an iframe element? I'm not trying to style the contents of the iframe, just the iframe itself. Why does it support :hover but not the others?
Update
tabindex is not an option
a) it doesn't work: https://jsfiddle.net/qk034swn/
b) the page becomes invalid if using XHMTL
Simply adding a :focus or :active in CSS won't be enough, since the iframe is not "focusable".
Edit -
Now, for the solution
tabindex attribute can be used.. After exploring a bit I discovered that this can't be done.
Here is a simple way to do that
HTML - <iframe src="http://foo.com"></iframe>
CSS - a:focus iframe{border:3px solid red;}
In short, we will be using <a> tag to make iframe focusable. Demo - https://jsfiddle.net/ctqfacgw/1/
Is the actually tabable? I think you need make the tab key actually focus on the instead of something in the contents of the . You would need to have an href set on the element or use the global HTML attribute tab-index="0" (0 so it doesn't interrupt the normal flow of tabbing).
I have a document structure that is similar across multiple pages.
HTML:
<ul>
<li>
<div>
<img src=""/>
</div>
</li>
</ul>
Currently, there is a border around all img elements. The client would like me to remove the border from around the image, because not all images are the same size and they want a uniform look with the borders. I noticed that there was a div wrapping the images, but the div does not have an id or class. How can I select this div in my css?
Thanks
For instance using
ul>li>div {
border: 1px solid blue;
margin: 5px;
padding: 5px;
}
From my point of view, this is the best way to avoid HTML manipulation.
However, if the structure ul>li>div is repeated elsewhere, this can be ambiguous.
Give it a class or ID... Then make the CSS for it.
If there’s no context anywhere, your recourse is to select it by the structure (as least specific as possible, if you like); for example,
li > div > img
But there usually is some kind of context. If your <li> had a class, for example, you could do:
li.contains-image > div > img
Or just
li.contains-image img
if there’s no other image. Does it or one of its parents have a sibling that identifies it somehow? Use one of the sibling combinators!
li.before-the-one-that-contains-the-image + li img
In case you only have these set or cascade of element in the page you can use
<style>
ul li div {
border: 1px solid red;
}
</style>
Otherwise this will add a border on all element matching on the page.
Best is to use an Id or a class on the element.
CSS: Is it possible to specify a style to a fieldset before another fieldset? When Two fieldset follow in my code I would like to apply them a specific style.
EDIT Without using class and id of course...
Here is my code
<div id="tabs">
<fieldset class="one">
<legend>One</legend>
Text
</fieldset>
<fieldset class="two">
<legend>Two</legend>
Text
</fieldset>
</div>
Ths give me this :
And I would like this :
With CSS you can apply styles only to child of any element or siblings of it, that's why we can apply style only on second fieldset using + Adjacent sibling selector. In following demo i will show how to do it.
About all possible CSS2 selector you can read in specification to make yourself understand: what you can made with css selector and what not
May be my explanation demo on dabblet.com can help you to solve your problem.
The result:
HTML markup:
<fieldset> </fieldset>
<fieldset> </fieldset>
<fieldset> </fieldset>
<fieldset> </fieldset>
CSS markup:
/* detect only first fieldset */
fieldset:first-child {
background-color: green;
}
/* detect all sibling fieldset element after first one */
fieldset:first-child ~ fieldset {
background-color: gray;
}
/* detect only first sibling fieldset element after first one */
fieldset:first-child + fieldset {
background-color: red;
}
Without using any classes or id's you can use first-child to target the first one and then use the default styling for second.
e.g.
form fieldset{ background: green; }
form fieldset:first-child{ background: red; }
First fieldset will have a red background, any others will have a green background. Note though this is for fieldsets within the same form. If they are in separate forms, then you can apply the same principle using the form:first-child
Why not assign each one a specific class or ID?
<fieldset class="firstset"></fieldset>
<fieldset class="secondset"></fieldset>
If you want to avoid using ID or class names , then go for the first-child property.
For eg -
form fieldset:first-child{
//your css code here
}
If you don't want to use classes or id's but still want them to have different styles, how about using inline CSS for each fieldset?
Is there a particularly good reason to avoid classes and id's while still wanting to use CSS? With a little more detail, we can probably give you a better answer.
I have an odd situation which I'm trying to improve. I have HTML content that displays fine on my web page, but not on others. I define a style in my page, which I apply to the <img> tag to limit its width, and it works great.
What I would like, though, is to have inline CSS on my <img> tag that basically says "hey, if that style I specified doesn't exist, do this instead". Is there any way to do that?
(for those who are curious, this is for content that can be republished elsewhere, and I have no control over the CSS on the other pages)
Update
Perfect, the !important rule was exactly what I needed. Thanks to everyone who answered.
css:
img {
border: solid 2px red !important;
}
html:
<img style="border: solid 2px blue;">
the img border color will be red, unless the stylesheet is not present, when it will default to blue.
See example: http://jsfiddle.net/GyR6N/
In which case, set the default styles (on your stylesheet) to important, like so:
img {
border: 3px solid black !important;
}
And apply your custom inline styling:
<img src="foobar" style="border: 1px solid blue;">
Your stylesheet will override it, but since it won't exist on different websites, it would use the inline styling instead (unless of course, that site also happens to have an important rule overriding yours!)
What you could do is define the style you want to check in your CSS with an !important tag, then add inline styles on your image tag. If the style is available, the !important tag will override the image inline style.
img.red
{
background:red !important;
}
<img class="" style="background:blue;" src="" alt="" />
<img class="red" style="background:blue;" src="" alt="" />
Your page will use the blue background for the image unless the image has a 'red' class.
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.