I am displaying a recordset using div and want to change the background color on alternating rows. I have done this successfully in the past using an HTML table, but I can't figure it out using div.
The data displays properly, but there is no color other than the page's background color.
I assume it is something very simple that I am doing wrong, but I can't see it.
Here is the relevant code section and the CSS styles I tried (in a related css file). I tried both odd and even. Neither worked. And the ".indexrow{background-color: #94C8F2;}" doesn't work either.
<div class="indexrow">
<?php
$wa_startindex = 0;
while(!$rsTitle->atEnd()) {
$wa_startindex = $rsTitle->Index;
?>
<div class="column left">
<?php echo($rsTitle->getColumnVal("Title")); ?>
</div>
<div class="column middle">
Issue: <?php echo($rsTitle->getColumnVal("IssueID")); ?>
</div>
<div class="column right">
Page: <span class="BlackHeadline3"><?php echo($rsTitle->getColumnVal("Page")); ?></span>
</div>
<?php
$rsTitle->moveNext();
}
$rsTitle->moveFirst(); //return RS to first record
unset($wa_startindex);
unset($wa_repeatcount);
?>
</div>
.indexrow{
background-color: #94C8F2;
width: 100%;
}
.indexrow:nth-child(even){
background: #f2f2f2;
}
.indexrow a:hover{
background-color: #FFFF00;
}
I think your mistake is putting the nth-child() on the parent? nth-child needs to go on the children you are listing out because nth-child(odd) is saying "every instance of this element that is an odd child. I think you have fallen for the common misconception that nth-child(odd) means: "any odd child of this element"
Related
let's consider we have the following code:
<div class="post wrapper">
<div class="post title">
<h3>Title</h3>
</div>
<div class="post thumb"> // This has the post thumb set as background image
<div class="post overlay"></div>
</div>
</div>
That with some extra CSS will result in:
If I want to get a nice effect when the user has the mouse the image I can do;
div.post.overlay:hover {
background-color: rgba(0,0,0,0.2);
}
Now, the :hover effect will not work if the user places the mouse on the Title text / white box. To get around this I'm using:
div.post.wrapper:hover div.post.overlay { // => note where :hover is
background-color: rgba(0,0,0,0.2);
}
Is this valid CSS? Will it work reliable across browsers? Is it okay to call :hover on the wrapper and then set the background-color on the overlay. It seems to work under Google Chrome and Safari.
Thank you.
This is perfectly okay. As long as the div.post.overlay is inside the div.post.wrapper, when you hover over the div.post.wrapper, the div.post.overlay gets the styles applied. This is valid in all browsers and it's a normal descendant selector.
I'm in a situation where the number of elements showed is variable, and I need a strange solution which I'm not able to achieve, I even doubt if it's achievable only with css.
I need to select the last-child if my number of elements is odd, and the last 2 child if the number of elements is even.
I've been trying with nth-last-child, :not(:nth-last-child()), odd and even, but never got a good solution.
Anyone has any idea/advice about this issue a part of adding a class "odd" like on html tables?
Thanks a lot in advance!
Here is one way...
.wrap div:last-child,
.wrap div:nth-last-of-type(-n+2):not(:nth-child(even)) {
color: red;
}
<div class="wrap">
<div>Odd</div>
<div>Even</div>
<div>Odd</div>
<div>Even</div>
<div>Odd</div>
<div>Even</div>
</div>
<hr>
<div class="wrap">
<div>Odd</div>
<div>Even</div>
<div>Odd</div>
<div>Even</div>
<div>Odd</div>
</div>
You can use CSS like so:
li:last-child:nth-child(odd) {
/* Last child AND odd */
background: red;
}
li:nth-last-child(2):nth-child(odd),
li:last-child:nth-child(even) {
/* Before last child AND odd */
/* Last child AND even */
background: green;
}
Demo: https://jsfiddle.net/hw0ehrhy/
Absolutely it can be done, with pure CSS. See the complete code below (odd child, last child red; even childs, last 2 childs green)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#but1').click(function(){
var count = $('p').length;
if (count%2!=0) {$('div>p:last-child').css('background','red');}
else {$('div>p:last-child').css('background','green');alert(count);
$('div>p:nth-last-child(2)').css('background','green');
}
});
});
</script>
</head>
<body>
<button id=but1>Click</button>
<div>
<p>This is one. </p>
<p> This is two. </p>
<p> This is three. </p>
<p> This is four. </p>
<p> This is five. </p>
<p> This is six. </p>
</div>
</body>
</html>
Enjoy, the coding ;)
Essentially, what I have in mind is a bunch of div elements, and I want to alternate colours. I could do this using IDs, but I want to use classes to minimize the amount of extra (and potentially spaghetti) code needed.
<div id="divs">
<div class="bla">
</div>
<hr/>
<div class="bla">
</div>
</div>
I've already tried nth-child, but it didn't work.
Edit: And I want to keep the hr.
You need to remove the <hr> element, see this fiddle
HTML
<div id="divs">
<div class="bla">bla</div>
<div class="bla">bla</div>
</div>
CSS
div.bla:nth-child(even) {
background-color: #CCC;
}
div.bla:nth-child(odd) {
background-color: #FFF;
}
i've searched around and seen some examples of how this is done, but i don't really get it and tried all methods but none worked, so i would like to ask if anyone can show me, for my code below, how can i affect the tournytitle when the img is hovered?
<div id="upevents" class="righty">
<div>
<div class="tournytitle">
<div style="font-weight: bold;">Test 2 Hat</div>
<div style="color: #888888; font-size: 10px;">17 . 12 . 2011</div>
</div>
<img src="/images/tourny/jomjom2.jpg" />
</div>
<div>
<div class="tournytitle">
<div style="font-weight: bold;">Test 1 Hat</div>
<div style="color: #888888; font-size: 10px;">12 . 12 . 2011</div>
</div>
<img src="/images/tourny/bane5.jpg" />
</div>
</div>
how should i write my css code for this?
i tried something like
.upevents img:hover + #tournytitle { background-color: yellow; }
but doesn't seem to work.
help much apperciated
As mentioned, your .tournytitle class must be a child of the img your trying to roll over. Your code .upevents img:hover + #tournytitle { background-color: yellow; } is certainly close, you just need to figure out how to comply to the above rule. With this your saying that .tournytitle is an adjacent-child of img, which is not the case in your given code. Also, your class and id symbols are incorrect, watch out for that.
I managed to get your code working by switching .tournytitle and img so that the class is now the adjacent-sibling - http://jsfiddle.net/gmwjw/1/ - I realize this may not be the design your looking for, but its a start.
This may be helpful to you - http://meyerweb.com/eric/articles/webrev/200007a.html
The .tourneytitle must be a child of the img element for you to achieve this. This fiddle shows the way you can reveal your image by hovering over your .tournytitle: http://jsfiddle.net/fWxH3/203/
To get what you want, you would need to change your HTML so that somehow your tournytitle div is a child of your img tag. Maybe you can use span's inside of your image tag instead of using div's for everything.
Is it possible to have a div.class different based on a class that is inside it?
So if i got like this:
<div class="defaultblock">
<div class="blockcontent">
<div id="group-id-tids-11" class="advertisement">
</div>
</div>
</div>
What I want is: 'IF an underlying div.class == advertisement THEN div.defaultblock {border : 3px;}
If using jQuery is an option, you could do something like this:
$(".blockcontent .advertisement").parent().css({border: "3px"});
As seen in this jsFiddle
.blockcontent .advertisment {border: 1px;}
.othercontent .advertisment {border: 2px;}
This should give you an idea how to nest properties... As far as I know you can't use this nesting to describe the outer properties. But not really sure... Note: this example changes the border of the inner div. Not the outer.
You cannot do this (select an ancestor based on child content, or select an element based on later siblings) with CSS alone.
As others have mentioned, JavaScript is an option here.
This is hackish, but using your own code:
<div class="defaultblock <?php echo $highlight; ?>">
<div class="blockcontent">
<div id="group-id-tids-11" class="<?php echo $highlight; ?>">
</div>
</div>
</div>
then in your CSS you just have to account for what you want .defaultblock.highlight to look like.