I have the following (simplified) HTML structure
<td>
<DIV class="t-numerictextbox">
<DIV class="t-formatted-value">$0.00</DIV>
<INPUT id="MyObj_PropertyName class="t-input" name="MyObj.PropertyName">
</DIV>
<SPAN class="field-validation-error" data-valmsg-for="MyObj.PropertyName">blah blah</SPAN>
</td>
What I'd like to do is set the background color to the parent div.t-numerictextbox to be red IF the span element also exist. What is the css syntax to do this conditional select on an adjacent sibling?
BTW, I need this has to work for IE 8.
Background, if you're curious:
I have an asp.net MVC application and am using the Telerik MVC NumericTextBox Control. When I have ModelState validation errors, the MVC framework automatically inserts a class="input-validation-error" attribute on the element, and the stylesheet picks this class up to highlight the element in red. However, it doesn't work for the Telerik MVC Control (I assume because Telerik's javascript overwrites this).
Thanks!
It is possible to place the span before the div in the html, and then position it with css.
Then use a css adjacent sibling selector to select the div adjacent to the span.
Finally put a position absolute on the span, and give it a top:..px to get it below the div.
So you get the following:
span + div {
background-color:red;
}
<td>
<span class="field-validation-error" data-valmsg for="MyObj.PropertyName">blah blah</span>
<div class="t-numerictextbox">
<div class="t-formatted-value">$0.00</div>
<input id="MyObj_PropertyName" class="t-input" name="MyObj.PropertyName">
</div>
</td>
CSS cant do that. You could style the span if the div.t-numerictextbox exist, but not the other way around. This is a limitation of css, but will probably never change.
Related
I have a web code generated by an aplication (built in angular). It is a menu choice where I need to hide some of them. It looks e.g. like this:
<div class=first>
<div class=second>
<a href=href1>
</div>
<div class=second>
<a href=href2>
</div>
<div class=second>
<a href=href3>
</div>
</div>
Now what I need is to hide the div which contains a element with href2.
I can hide the a element:
.first .second a[href="href2"] {display:none}
But I need to hide the whole div element. I thought:
.first .second < a[href="href2"] {display:none}
that doesn't work.
I KNOW THE JQUERY SOLUTION with has function. The problem is I can only adapt css files of the application. If i'm right I cannot use jquery in css file.
Please...any Idea how to do this ?
thanks a lot for help
best regards
Marek
At the moment there is (sadly) no way to adress the parent element with CSS.
I don't know your layout or CSS Code but maybe you can just structure your HTML-Code in a different way.
Edit
And now I understand your question...
To hide (for example) the 3th .second div you don't need to adress it from the child element but from the parent element.
What you are probably looking for are the nth selectors,
for instance: nth-child() or nth-of-type().
You can find more info here.
Also, you should probably take a look at the basics of HTML and CSS.
In your code you have not closed the <a> tags or wrapped the values of the attributes in quotation marks.
Wrong:
<div class=first></div>
Right:
<div class="first"></div>
To hide (for instance) the first element you could use the :first-child selector or the :nth-child() selector. Since you will probably use the nth-child() selector this would be:
.first > .second:nth-child(1) {
display: none;
}
Here's my HTML setup:
<div class="form-item">
<input type="checkbox" id="my-check">
</div>
<div class="form-item">
<label for="my-check">I'm a checkbox</label>
</div>
Is there any way in all the world of CSS to style that label based on whether or not the checkbox is checked? (Without changing the current HTML structure?)
Unfortunately, you cannot use CSS to style your label based on the state of your checkbox without changing your HTML. As of now, CSS selectors support child selectors and sibling selectors, but no selectors to style the child of one element based on the child of another element. You can find the whole list of CSS element combinators at: http://www.w3.org/TR/css3-selectors/#combinators.
Is there a CSS or pure HTML solution to having a div only be visible when it has content? I have this JSP code:
<div class="message-panel panel-alert">
<span class="label-warning">
<span class="warning-sign"></span>
</span>
<c:if test="${condition1}">
<p> Condition 1 is true </p>
</c:if>
<c:if test="${condition2}">
<p> Condition 2i s true </p>
</c:if>
</div>
If either of the conditions are true, I do want to show the alert panel with my warning sign, but I don't want this div to appear at all if neither of them are true. Two solutions I can think of is to surround this whole thing with an all-inclusive if statement, or to modify the visible attribute of the div programatically in javascript. however, I am wondering if there is a way to say "Hey, div, go away if there's nothing in you".
Use the :empty pseudo-selector:
div.panel-alert:empty {
display: none;
}
You can try creating a class called hidden. And add it to the <div class="message-panel panel-alert"> when both texts are empty (using both ifs) and then in css define .hidden {display:none;} or as you stated use some javascript as described here Using an if statement to check if a div is empty
I would like to use css3 features to hiding previous element.
Basically,
I want to use a checkbox to hide previous sibling element without using javascript.
I have prepared a sample for entry point.
http://cssdesk.com/5zccy
Thanks
Edit:
I have changed sample.
My usecase: I want to have collapsible sections at my site. Two area separated by a simple checkbox and checking it will beautifully hide previous sibling.
I believe that using pure css will let me to reduce using javascript for this task.
You can not hide the previous elements - just the following ones with the general sibling selector
DEMO
Then you might be able to position the elements, so on the actual page the checkbox will appear after the .parent div.
There's no css selector to select the previous tag of a matched element. The closest you can get using only css it's doing that for the next element:
<input class="hider" type="checkbox" /> child
<div class="parent">
Parent
</div>
.hider:checked + * {
display:none;
}
I have a simple form in a ASPX page that have a lot of <label> and <asp:TextBox> pairing that construct the outlay of the form.
I have a requirement to add a string behind the textbox to indicate that the field is compulsory. I'd tried adding either a <span>, a <em> or a <div> after the field but it will still display the message at the bottom of the textbox.
Any way for me to achieve this?
EDIT:
I mean right hand side of the textbox, not behind as in watermark. My Bad.
EDIT for sample code:
I'd tried all the suggestion but it is still not working, thinking whether it's my code issue or not. Below are my codes:
<label>Telephone No.</label>
<asp:TextBox ID="txtTelNo" runat="server"></asp:TextBox>
<span class="afterInput">test</span>
any pointers? Thanks.
EDIT for Answer
As it turns out the problem lies in the css property. The template that i used has all the input assigned with the display: block property, which makes anything after the <input> element to be pushed down.
After creating a custom css class with display: inline-block and assign to them appropriately, i manage to get the result that i wanted.
Many thanks for the answer provided, especially the :after attributes and the watermark attributes.
See http://jsfiddle.net/ekWG9/
.required:after{
content: "*";
color: red;
}
<label>A box</label><input type="text" value="Hello" /><span class="required"></span>
<!-- alternative HTML -->
<span class="required"><label>A box</label><input type="text" value="Hello" /></span>
Using the :after pseudo element selector allows you to take the literal content out of the markup (e.g. you don't have to repeat "*" over and over).
You can also use relative or absolute positioning to tweak the location of the content of the :after pseudo element. Example: http://jsfiddle.net/ekWG9/1/
By behind the textbox, seems you are talking of watermark text.
You could use the TextBoxWatermark from ajaxcontrol toolkit.
There are also several jQuery alternatives to implement it.
html5 also has browser support for watermarks:
<input name="q" placeholder="Go to a Website">
You could add an attribute to your control to that effect.
Use css for this purpose:
span.clsRequired {
float:left;
margin:2px 0 0 3px;
color:red;
}
And your span before text box looks like:
<span class="clsRequired ">*</span>
you should try something like this
<body>
<form id="form1">
<asp:TextBox ID="TextBox1" runat="server"/> <span>Required field</span>
</form>
</body>