I have this in my HTML file:
<td>
<div class="something">someText</div>
<div class="something">otherText</div>
</td>
Is there a way in CSS I can set the background of the PARENT of the class named something? In this case, the tag?
Here is my code:
<script type="text/javascript">
function MyMethod(sender, eventArgs) {
if (condition) {
app.set_cssClass("MyClass");
}
$('.MyClass').parent().css('background', 'url(Images/star.png) no-repeat')
}
</script>
At this point, no.
However, jQuery can do this quite easily.
$('.something').parent().css('//WHATEVER')
In the future, CSS4 will be adopting a subject selector, which would do what you need
$OL > LI:only-child
The $ would be used to select the parent or subject of a specific element.
http://www.w3.org/TR/selectors4/#subject
no, as I know there is no parent selector in CSS
No, but you can do it in jQuery
$('.something').parent().css('background','<rules>')
Where <rules> are the CSS rules you want to set for the background property.
Related
I need to style body tag differently based on another element’s class that is set dynamically on load. Is it possible to select body as a parent element of another element without using JS?
Under condition #1 the page might look like this:
<body>
…
<div class=”first-version”>…</div>
…
</body>
Under condition #2 the page might look like this - different class on div:
<body>
…
<div class=”second-version”>…</div>
…
</body>
Pseudocode, this doesn’t work but gives you an idea what I’m trying to do (create a theme of sorts):
body[contains div.first-version] {
margin:100px;
}
body[contains div.second-version] {
margin:200px;
}
Use different classes for the body styling and you SHOULD use Javascript.
Try this template:
HTML
<body id="the_body">
<input id="template_1" value="Template 1" type="button"/>
<input id="template_2" value="Template 2" type="button"/>
</body>
CSS:
.template_1{
color:red;
}
.template_2{
color:blue;
}
JS (use jQuery):
$(function() {
$("#template_1").click( function()
{
$("#the_body").html("<p class='template_1'>template 1</p>");
}
);
$("#template_2").click( function()
{
$("#the_body").html("<p class='template_2'>template 2</p>");
}
);
});
DEMO
Ok, thanks everyone for your help. That was very fast, I didn't expect this. Sorry if question wasn't clear. (This is my first time posting a question Stack Overflow).
It looks like pure CSS solution is not possible in this case and I should just use jQuery. Michael Marr posted the link to the jQuery solution that I'm going to use:
Apply CSS styles to an element depending on its child elements
Im trying to style some autogenerated html. I built a system that allowed me to overlay bootstrap on this autogen stuff and now I want to do some tweaking of whats there.
the autogen produces stuff like this
<dl>...</dl>
Now I want to apply bootstraps dl-horizontal class to that generated tag. Since its generated, I can't simply class it, I can't ID it, nothing. It has to be purely CSS selectors, which is something I know very little about.
What would a CSS tag that does this look like?
you can use jQuery to add a class to your <dl> tag like this:
$( document ).ready(function() {
$("dl").addClass("dl-horizontal");
});
$( document ).ready(function() {
$("dl").addClass("dl-horizontal");
});
.dl-horizontal {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
jsFiddle Demo.
There is no option in css to add a class. But you can use children selectors to format if all your elements are the children of the same parent.
For example if your elements are a children of the parent body then:
body > dl
{
color : red;
}
The above code will change the text - color of all the elements that are the children of
I have a set of div whose visibility is set to either hidden or visible. Based on this css visibility property i need to add the css property on those div, like
<div class="div-class" style="color:#ff0000; margin: 0px 10px; visibility:hidden;">
[Block of Code]
</div>
Now i need to define the following in style.css file.
.div-class:visible {top:10px;left:50px;}
.div-class:hidden {top:0px;left:0px;}
Is this possible???
yes with css attributre selectors you can do it
try the below css:
.div-class[style*="visible"] {
color: green;
}
.div-class[style*="hidden"] {
color: red;
}
What you are trying to do is not "really" possible.
I mean it's ill thought by design in the first place.
Even Vamsikrishna's solution might not work as expected.
If you set the overflow property to hidden via javascript or inline styles, the .div-class[style*="hidden"] rule will apply since the style attribute will contain the hidden string.
Moreover , setting inline styles on html elements is bad practice itself in most cases.
I suggest you try and learn css principles a little more.
I'd do the following:
HTML
<div class="div-class div-hidden">
[Block of Code]
</div>
CSS
.div-class {color:#ff0000; margin: 0px 10px; top:10px;left:50px;}
.div-hidden {visibility:hidden;}
.div-class.div-hidden {top:0px;left:0px;}
Then you can use javascript to toggle the "div-hidden" class.
You can do something using attrchange - a jQuery plugin ,
like this:
Add "attrchange" script into HTML page like
In Javascrip catch event
var email_ver_input = $("input#email_ver_input.verifyInput");
email_ver_input.attrchange({
trackValues: true,
callback: function (event) {
if (email_ver_input.is(":visible")){
$("#inputcode_wrap").show();
}
}
});
I need to select all span tag elements within a div with an id list_{[0-9]}+ having the following form:
<div id="list_1234" ...>
<!-- can be nested multiple levels deep -->
...
<span class="list_span">Hello</span>
</div>
How can I do that, e.g. without using jQuery? Is that possible?
If you're happy with css3 selectors you could do something like
div[id^="list_"]
But this will also target divs with ids like list_foo.
You can do this with pure CSS pretty easily, just give those divs a class like this:
<div id="list_1234" class="container" ...>
And CSS like this:
.container span { /* styles */ }
Why you do'nt use a common class ? You can add many class
class="list_1234 mydiv"
And your selector :
.mydiv span
The only thing you can do is:
list_1 span, list_2 span, list_3 span... { ... }
Is it possible to add a "class" attribute to these divs? That's the proper way to handle multiple elements with ids.
I different CSS styles, one of which is:
#layoutsectiondiv{
border: 2px dashed #000000;
padding: 1px;
left: 0px;
}
I have a aspx page:
<div id="testDiv" runat="server">
</div>
If it was regular HTML, I would set the style of a div by doing a
<div id="layoutsectiondiv">
</div>
At runtime (in code behind), I need to dynamically assign different styles to the DIV. How would I do it?
Use the class property and change your css styles to use class selectors instead of id selectors. For example
.layoutsectiondiv{}
<div id="testDiv" class="layoutsectiondiv">
</div>
Edit
Make your class only so that you apply it on the specific divs you want. don't reuse your classes. This should be easy since your css is already tied to a specific ID, just put that class on that element.
If you use that class on many types of elements what you suggested would work fine.
Josh is right, you should use class instead of id.
for your question :
At runtime (in code behind), I need to
dynamically assign different styles to
the DIV. How would I do it?
try this :
// layoutsectiondiv is defined as class : .layoutsectiondiv{}
testDiv.Attributes["class"] = "layoutsectiondiv";
So you could use a css id selector this way.
#layoutsectiondiv { color: red }
with the following html
<div id="layoutsectiondiv">
</div>
Or a css class html selector like this.
.layoutsectiondiv { color: blue }
with the following html
<div class="layoutsectiondiv">
</div>
If you want to control the style of a particular .net control, ie one that has the runat="server" attribute, then as we know .net will 'mangle' the id to ensure its unique.
In this case in our code we can use FindControl to access the div and change its style
<div id="testDiv" runat="server">
</div>
ie.
HtmlGenericControl testDiv =
(HtmlGenericControl)Page.FindControl("testDiv");
// to hide
testDiv.Attributes.Add("style", "display: none"); // OR
testDiv.Attributes["style"] = "display: none";
// to show
testDiv.Attributes.Add("style", "display: block"); // OR
testDiv.Attributes["style"] = "display: block";
// or to add a class
testDiv.Attributes.Add("class", "MyCssClassName"); // OR
testDiv.Attributes["class"] = "MyCssClassName";
Here is a good explanation on the difference between css id and class - CSS: div id VS. div class.
And here for How to edit CSS style of a div using C# in .NET