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
Related
Is it possible to get the attribute of the child element in the parent's pseudo element.
HTML
<div class="parent">
<pre>
<code class="foo" data-lang="bar">
....
</code>
</pre>
</div>
What i need is .parent::after have attr(data-lang) from .foo as content
thank you
It's not possible to do this as CSS by nature (and name) cascades. So the child elements data attribute is out of scope for the parent elements pseudo element to use.
From the Mozilla Developer Network:
The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the style sheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned.
It depends what you're after exactly with the value of the data attribute, but you can still style things with the child element but it depends on your use case for it. If you can, move the data attribute up to the parent (if that's possible to do here).
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
I have a text input that is wrapped inside a div. I want to change a css attribute of the :after of the parent div when the input is focused. How can I do this in CSS?
<div class="dataInputTextContainer">
<input class="dataInputText" />
</div>
I tried this but it did not work:
.dataInputText:FOCUS ~ .dataInputTextContainer:after{
background-color: red;
}
Simply put, you cant
(sorry)
CSS works in terms of DOM decendancy, in that rules can only be constructed for elements which appear subsequently in the DOM. As such, you cannot select a parent, or even previous sibling.
What I would tend to suggest is that you sit down, take a step back and work out what you are trying to accomplish. 99% of the time either someone else out there has done it, or you can do it with a minor change to either your CSS or HTML.
Incidentally, a solution would not be to try and style :before or :after on the input, it is a replaced element so such elements do not apply. Why not simply add a label for the input and style it?
If you didn't apply style on :after of the parent but rather put a tag at the same level than the input, you could have used this syntax to apply style of the sibling tag.
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
I have a draggable div element with a hover style. This works fine, but the div contains some form elements (label, input). The problem is that when the mouse is over these child elements the hover is disabled.
<div class="app_setting">
<label">Name</label>
<input type="text" name="name"/>
</div>
.app_setting:hover {
cursor:move;
}
Any ideas how to get the hover to apply also to the child elements?
.app_setting *:hover { cursor:move }
At least 2 ways of doing it:
hover states for each child, either explicitly or with * selector, as suggested by garrow .class *:hover
cascade hover state to children .class:hover *
There are probably others
This isn't a css answer, but it might still be useful to you.
Someone else already suggested that you might have to resort to javascript for browser compatibility. If you do resort to javascript, you can use the jquery library to make it easy.
$(".appsetting").hover(hoverInFunc,hoverOutFunc);
This sets an event handler for hovering into and out of the selected element(s) as matched by the css style selector in the $() call.
You might have to resort to JS to make it happen for IE6.