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.
Related
On an asp control I have an html element that has a css style applied to it using a ::before pseudo element.
Sometimes depending on some variables that are determined in the code behind of the control I don't want that ::before style to be applied.
How can I accomplish this, since the ::before element is not an actual element on the page?
Thanks
One content (:after for box and :before for arrow) property for data-tooltip and I want another content property for the field icon using custom icon fonts like fontello or fontawesome. How can I achieve this.??
If you're asking whether it's possible for an element to have more than one :before or :after pseudo-element at a time, that's not possible in CSS2.1. The reason is twofold:
Any element can only have exactly one :before or :after pseudo-element at a time due to cascading rules. See this answer for details.
Even if an element could have more than one of each kind of pseudo-element, the browser wouldn't know how exactly it should lay all of them out in the formatting structure. This can be worked around by having CSS offer a way to specify multiple pseudo-elements or nest pseudo-elements within other pseudo-elements, but neither of these ideas have been implemented.
If you need a complex structure that cannot be achieved with a single element with one :before and one :after pseudo-element, you will need to modify your HTML to accommodate this structure.
I am moving clarification to the top of this post: When the mouse is not hovering over a certain div, I want elements other than this div to have a red background-color. Can this be achieved with a not() selector as seen in this post? The predicament appears to be that since the certain div is within a body element, the mouse will always be hovering over the body element even when it's over the certain div, thus the body will always have a red background-color.
I am trying to use the not() selector to affect elements when hovering over elements that are not within my selection.
For example:
[data-panel] { background-color:white; }
:not([data-panel=visible]):hover { background-color:red; }
<body>
<div data-panel='visible'>
<div data-panel='visible'>Content</div>
</div>
</body>
My desired outcome is that if the mouse is hovering anywhere besides those divs, the background-color will change to red (i.e. hovering in the body).
However, since those divs are within the body, that selector will always be active. The body will always be red. Is there anyway to style those divs so that this doesn't happen? Maybe something with z-index? Any clues?
What you are trying to do is not possible with CSS alone.
To achieve that effect – let the body turn red on :hover, but not when hovering the panels – you have to cancel the pointer event bubbling on the panels. This is only possible using JS.
BTW, HTML5 has a method to define own attributes: the data-* attributes; e.g. data-panel="visible".
Don't quote your attribute selector.
As already mentioned by James; panel is not a valid HTML5 attribute. You should be taking advantage of HTML5's data-* attributes.
:not([data-panel=visible]):hover {
background-color:red;
}
<div data-panel='visible'>
<div data-panel='visible'>Content</div>
</div>
This of course, affects all elements that don't have the matching attribute, including <body>, which is while your entire page's background will turn red when hovered.
Edit
The predicament appears to be that since the certain div is within a body element, the mouse will always be hovering over the body element even when it's over the certain div, thus the body will always have a red background-color
There is no CSS parent selector, so an event on an element within the body, can't have any say over any styles applied to the body.
I have this code:
<p class="alert-error">
<span></span>
<span></span>
<span></span>
</p>
I want to change the style of the CSS for "alert-error" when it shows <span></span>. The code is being generated by a system with limited backend customization. Sometimes the spans are filled with error messages.
The :empty selector doesn't seem to work cause I have to put it on the alert-error class.
Any help would be appreciated.
I'm guessing based on what I can surmise from your markup structure that you want to hide the entire .alert-error element, not the span elements as stated in the question title. It doesn't really make sense to display .alert-error itself if its children are empty, since that would just result in an empty box.
The problem is that :empty itself does not match an element if it has child elements, even when all the children themselves are :empty.
If CSS had a parent/has selector, you would theoretically be able to select .alert-error based on the fact that all its children are :empty. But since there doesn't exist such a selector in CSS yet, you will need to use JavaScript.
I made the css like this:
.alert-error span:empty {
background: green;
}
and it works, see jsfiddle
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