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
Related
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
With the following block structure:
<div class="container">
<div class="title"></div>
<div class="subject"></div>
</div>
is it possible to hide (display:none) a .container if it's child .subject is empty?
Thanks!
well... you could try to fake it... make title position: absolute and for container set overflow: hidden; container itself will only be visible if you put something into .subject tag. Like this:
jsfiddle example
I believe you'll have to use javascript to do this. In jQuery:
$(".container").each( function() {
if ( $(this).children('.subject').html() == '' ) {
$(this).hide();
}
} );
Example at: http://jsfiddle.net/m5jjs/
Not currently possible in pure CSS in any browser I know of.
There is a jQuery plugin cssParentSelector polyfill for the upcoming parent selector in CSS Selectors Level 4 if you already have a jQuery dependency in the project.
:empty psuedo class can be used if element has no node but you have. Need JS though.
$(".container *") {
if($.trim($(this).html()).length == 0 && $.trim($(this).text()).length == 0 ) {
$(".container").css({ "display" : "none" });
}
});
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is there a CSS parent selector?
Is there a css selector I can use only if a child element exists?
Consider:
<div> <ul> <li></li> </ul> </div>
I would like to apply display:none to div only if it doesn't have at least one child <li> element.
Any selector I can use do this?
Sort of, with :empty but it's limited.
Example: http://jsfiddle.net/Ky4dA/3/
Even text nodes will cause the parent to not be deemed empty, so a UL inside the DIV would keep the DIV from being matched.
<h1>Original</h1>
<div><ul><li>An item</li></ul></div>
<h1>No Children - Match</h1>
<div></div>
<h1>Has a Child - No Match</h1>
<div><ul></ul></div>
<h1>Has Text - No Match</h1>
<div>text</div>
DIV {
background-color: red;
height: 20px;
}
DIV:empty {
background-color: green;
}
Reference: http://www.w3.org/TR/selectors/#empty-pseudo
If you go the script route:
// pure JS solution
var divs = document.getElementsByTagName("div");
for( var i = 0; i < divs.length; i++ ){
if( divs[i].childNodes.length == 0 ){ // or whatever condition makes sense
divs[i].style.display = "none";
}
}
Of course, jQuery makes a task like this easier, but this one task isn't sufficient justification to include a whole libary.
Nope, unfortunately that's not possible with CSS selectors.
CSS does not (yet) have any parent rules unfortunately, the only way around it if you must apply it only parents that contain a specific child is with the Javascript, or more easily with a library of javascript called jQuery.
Javascript can be written in a similair way to CSS in someways, for your example we would do something like this at the bottom of our HTML page:
<script type="text/javascript">
$('div:has(ul li)').css("color","red");
</script>
(For this you would need to include the jQuery library in your document, simply by putting the following in your <head></head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
If you use jquery, you can try out this function
jQuery.fn.not_exists = function(){
return this.length <= 0;
}
if ($("div#ID > li").not_exists()) {
// Do something
}
There is another option
$('div ul').each(function(x,r) {
if ($(r).find('li').length < 1){
$(r).css('display','block'); // set display none
}
})
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.
I use the following code on my page:
<div id="itemstable" class="item_type1">
...other divs here...
</div>
And in my CSS file I have this code:
.item_type1 div {
background-image: url(images/type1.giff);
}
the problem is there are a lot of different item types so I will need to have a lot of lines in my CSS file. I was wondering how to apply the background-image: url(images/type1.giff); style to the nested divs without assigning it to each one. eg. I want to change the code for the "itemstable" div so that it applies a css rule to the nested divs.
Is this possible?
EDIT: I'm looking for something like this:
<div id="itemstable" style="SET BACKGROUND IMG FOR NESTED DIVS HERE">
...other divs here...
</div>
(If I'm understanding the question correctly:)
Think about using a different ID/class scheme. I don't know about the further specifics of your structure, but id="itemstable" class="item_type1" seems slightly redundant to me. Can itemstable be anything else than item_type1? Try to apply more generic class names and keep the specific cases for IDs.
Failing that, you can add another class that is responsible for adding the background image: class="item_type1 item_types".
EDIT
Since it seems sheer mass is the main problem (not applying the style as the title suggests) it's probably best to dynamically insert a style in the page header. Something along the lines of:
<head>
...
<style type="text/css" media="screen">
<?php echo "#$myelement"; ?> div { background: url(<?php echo $image; ?>) ...; }
</style>
</head>
Inline styles can only apply to the element directly, not one of its children. I.e.:
<div style="background: ...;">
The background only applies to this one div.
You can't use selectors in inline styles like:
<div style="div { background: ...; }">
I think including a little more of your HTML would make your question easier to understand.
You can certainly include multiple rules in a compound selector:
.item_type1 div.a, .item_type1 div.b, .item_type1 div.c {
background-image: url(xyz.gif);
}
But since you are pulling images from the database dynamically, you will need to either include them in your dynamic code-- in the divs themselves, or dynamically create CSS as suggested above:
<style>
<% for $i in $images { echo "div.image$i div { background-image: url(/path/to/$i) }" %>
</style>