There is a hack to make work :focus pseudoclass for div elements: adding to div tabindex. Like this:
.testFocus:focus{
background: red;
}
<div class="testFocus" tabindex="0">awesomeDiv</div>
Is this behavior specified somewhere in W3C documents (where?) or is it just a non-documented hack?
"This behavior" consists of:
div element is not focusable by default.
div element with tabindex is focusable.
tabindex is one of the global attributes. This means it can be specified on all HTML elements.
0 is a valid value (see "If the value is a zero" under the definition of tabindex).
So your HTML is fine.
tabindex will work on the following elements in HTML5. https://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute
a elements that have an href attribute
link elements that have an href attribute
button elements
input elements whose type attribute are not in the Hidden state
select elements
textarea elements
Related
I have a <input> inside a <div>.
Now if I use the pseudo-class :hover both of the elements gets the pseudo-class.
But If i use :focus only the <input> gets that pseudo-class.
I have read that only certain elements can have the :focus pseudo-class and <div> is not one of them.
Now I wonder if there is some other pseudo-class I can use that exist on both tags with similar behavior as :focus, but will appear on both tags like :hover does.
UPDATE:
plunker illustrating the problem.
Effectively, in order to be able to be focused, an element needs to be focusable:
An element is focusable if all of the following conditions are
met:
The element's tabindex focus flag is set.
The element is either being rendered or is a descendant of a canvas element that represents embedded content.
The element is not inert.
The element is not disabled.
In your case, the problem is the first condition. You can make the div focusable by setting its tabindex focus flag through a tabindex attribute.
p:focus {
background: #0f0;
}
<p tabindex="-1">Click me. I can be focused</p>
<p>But I can't :(</p>
However, there is a problem. There can only be one focused element in the document. Therefore, the div and the input can't be focused simultaneously.
In fact, you don't want to select the div when it is focused, you want to select it when it contains a focused element.
The Selectors Level 4 draft addresses this exact problem by creating the new :focus-within pseudo-class:
9.4. The Generalized Input Focus Pseudo-class:
:focus-within
The :focus-within pseudo-class applies to elements for which
the :focus pseudo class applies. Additionally, the ancestors
of an element that matches :focus-within also match
:focus-within.
Sadly browsers don't support it yet. So meanwhile, use JS.
I don't think you can do what you want with just CSSyou may need a bit of jquery like:
$(document)
.on("focus", "input", function(){
///here what you want, in this example add a class to your div
$('div').addClass("divfocus");
})
JSFIDDLE
When I apply the following styling to a legend tag
display: inline;
width: 300px;
I see that the legend tag has a width of 300px It still accepts the width. Here is a demo. Is there something special with this element, because I expect inline elements to ignore the width setting!
This may be a case similar to button elements, as described in Bindings:
10.5.2 - The button element
#namespace url(http://www.w3.org/1999/xhtml);
button { binding: button; }
When the button binding applies to a button element, the
element is expected to render as an 'inline-block' box rendered as a
button whose contents are the contents of the element.
Chrome seems to do the same for legend elements.
But probably it shouldn't be doing that, because
The spec doesn't define such binding for legend elements.
legend elements shouldn't be replaced elements (they are listed in the Non-replaced elements section), so they should conform to CSS rules.
I have a rough idea that it hops from <input> to <input> but is there any documentation for it? My purpose was to look for a way to set focus only in css.
If by "focus" you mean the focused element when tabbing through elements in a rendered page, then the tabindex=nn attribute defines the tabbing order.
According to the W3C Documentation
The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA
See also Creating Logical Tab Order with the Tabindex Attribute
I have several blocks that look like this:
<div class='templatechoicedesigncss'>
<img src='/images/templatepics/random(100x140).png' />
<p>
<input type='radio' name='templatechoice' value='random' checked>Random</p>
</div>
Whenever the INPUT field is marked as CHECKED - I need to change CSS to the div with class=templatechoicedesigncss.
But I need to do it through pure CSS only - no javascript, jquery or other triggers.
Is that possible?
Not possible without JavaScript.
By the way, a <p> inside a <span> is bad markup, because span's are inline elements and p's are paragraphs.
Also, put the text "Random" inside a <label>.
No you can not change parent css with pure CSS.
Not possible your way.
Check this http://www.w3.org/TR/selectors/#checked
It says...
Radio and checkbox elements can be toggled by the user. Some menu
items are "checked" when the user selects them. When such elements are
toggled "on" the :checked pseudo-class applies. While the :checked
pseudo-class is dynamic in nature, and can altered by user action,
since it can also be based on the presence of semantic attributes in
the document, it applies to all media. For example, the :checked
pseudo-class initially applies to such elements that have the HTML4
selected and checked attributes as described in Section 17.2.1 of
HTML4, but of course the user can toggle "off" such elements in which
case the :checked pseudo-class would no longer apply.
...exactly, word to word.
which basically means you can change dynamically the properties of the what is checked in CSS3 but not it's parent. but oh, it's not fully supported in browsers. other way is to use JS | jQuery | MooTools | YUI etc
Also, BoltClock pointed out that there is no parent selector in CSS; so not possible via only CSS
Is it possible to change the appearance of an html link when it's disabled? For example using something like:
a.disabled
{
color:#050;
}
<a class="disabled" disabled="disabled" href="#">Testing</a>
The example above does not seem to work with IE but works for Firefox, on IE it remains gray even when I set the colour in the style. If I remove the disabled="disabled" however it works.
The :disabled pseduo class only works with input fields, like text, radio, checkbox, etc. and applies when you give the element the attribute `disabled="disabled". IE6, however, doesn't recognize the pseudo class, so you'll need to use a class separately to make it work.
<input type="text" value="You can't type here" disabled="disabled" class="disabled" />
can be styled with
input[disabled="disabled"], input.disabled {
/* whatever you want */
}
The pseudo class will apply to modern browsers while the class will cover IE6.
Like Radeksonic said, if you want the disabled CSS to appear on other elements, like anchors, you'll just need to make and use a class. There's no disabled attribute for <a>s
For a link like the one you provided in the comment:
some link
The style would be (just like any other selector based on an attribute):
a[disabled=disabled] {
color: red;
font-weight: bold;
}
If I was in your place, I'd check for cross-browser behavior, though. I haven't seen the disabled attribute used before.
Use
a.disabled
{
color: #CCC;/* Just an example */
}
Just use a dot followed by a class name to indicate that you want to use that class.
It works in all browsers
Of course, just adding a class to style your <a> elements in a particular way isn't going to stop them actually performing their normal action. For that, you'll need javascript. In a basic fashion, you could have:
linky
You could use the attribute selector for full browser support.
This will be sufficient:
a[disabled] {
display:none;
}
ATTRIBUTE SELECTORS
[att]
Match when the element sets the "att" attribute, whatever the value of the attribute.
[att=val]
Match when the element's "att" attribute value is exactly "val".
[att~=val]
Represents an element with the att attribute whose value is a white space-separated list of words, one of which is exactly "val". If "val" contains white space, it will never represent anything (since the words are separated by spaces). If "val" is the empty string, it will never represent anything either.
[att|=val]
Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D). This is primarily intended to allow language subcode matches (e.g., the hreflang attribute on the a element in HTML) as described in BCP 47 ([BCP47]) or its successor. For lang (or xml:lang) language subcode matching, please see the :lang pseudo-class.
<a class="disabled">My disabled link</a>
a.disabled {
display:none;
}
There are only 5 (I think) pseudo-class selectors for links: link, visited, hover, and active, and focus.
if you use JQUERY you can add attribute to anchor
.attr("disabled","true")
and remove it
.removeAttr("disabled")