I have several div elements and I want to alternate another set of div styles within them. So basically change the child's style to alternating background colors like so:
HTML
<article class="post"> <!--first post-->
<div class="title">Title Here</div>
content here
</article>
<article class="post"> <!--second post-->
<div class="title">Title Here</div>
content here
</article>
CSS
div.title:nth-of-type(even) {
background-color: #F00;
}
div.title:nth-of-type(odd) {
background-color:#00F;
}
Is there a way to do this, because I know that using css to alternate styles it has to be within a parent. Or if not would there be any jquery script that i could use?
Thank you.
You should use
article.post:nth-of-type(even) .title
Works fine this way.
jsFiddle
Also, try to stay away from over-qualified CSS selectors like div.title, as explained in this article by CSS Wizardy. Basically, the .title in this instance is definitely within the article.post, so you don't need to add the div too.
Overqualified selectors make the browser work harder than it needs to
and uses up its time; make your selectors leaner and more performant by
cutting the unnecessary bits out.
nth-of-type is alway checking for the postition of the element in his parent. Hence, your div's are always first child of .post. That's why it doesnt work.
But you can check the child position of it's parent. Just like that :
.post:nth-of-type(even) div.title{}
.post:nth-of-type(odd) div.title{}
Related
Hi I have a scenario where I have to style a h3 element based on parent div class
Example:
<div class="First">
<p>This is sample text</p>
</div>
<div class="Second">
<h3>This is sample header</h3>
</div>
Now what I want to do is if there is a p tag inside class named First, I want to change the style of h3 tag of second class.
Answer: Without altering the HTML, this is currently not possible with CSS alone.
Further information: The CSS Selectors Level 4 specs introduce(d) the new parent selector $:
$div > p {
// styles here
}
The selector above would target the div, not the p. Of course, only divs, which have a direct p child element. Still, this wouldn't help much with further additions and as BoltClock noted, the specs haven't been revised for a couple of years and a parent selector might not even come soon.
This would be easier to explain with an example:
I have a div ID that is used many times on my page.
I would like to style only 1 of these div's differently, without changing its name.
Is there a way to style this 1 div, if it is inside another div?
For example, my page contains many of these:
<div id="text2">Some text</div>
And the one I wish to change is:
<div id="container">
<div id="text2">Some different styled text</div>
</div>
Is this possible?
PS. This is all with Wordpress, therefore they are dynamically generated. Adding individual inline CSS with style will not work. This MUST be done in my external CSS sheet.
In your case you could treat the inner div witin a div as a child and as a result you can use this css
#container #text2 {
/* Unique Div Style */
}
It is correct that if you have an element that is being repeated a lot,, you should use a class and not an id.
If you have a lot of
<div id="text2">Some text</div>
then it should really be like this
<div class="text2">Some text</div>
If you do that then your CSS could look like this for that ONE div that you want to style differently
#container .text2 {
/* Unique Div Style */
}
Of course, provided that your container ID is unique ID.
ALSO, if you changed your code and you styled repetitive elements with classes then you could apply multiple classes to the same element..
Like so:
<div class="text2 text2new">Some text</div>
Now you could write CSS for class .text2new
.text2new{
/* make sure your css code overrides the old class*/
}
If it is important to you to have the site display correctly in older browsers multiple classes are not supported btw.
Hope this makes it clearer.
Try:
#container #text2 {
/* YOUR CSS HERE */
}
As commented above, if you want to apply the same style to multiple elements, use class instead of id. Styles could be applied to specific elements following the specified structure, which means in your case, you should be using
#container .text2 {
// styles go here...
}
If however your text2 remains an id, the style would only be applied to the first element with that particular id found.
In my site there're two different div, but they have the same parent div (two child div). So, I want to do this: div.1:hover -> div.2{display:none}. How can I do it using CSS?
Depending on the way your HTML is laid out it can work. The divs need to be next to each other like so:
<div class="first">
First div
</div>
<div class="second">
Second div
</div>
Then use this CSS:
div.first:hover + div.second { display: none; }
Fiddle here: http://jsfiddle.net/CyT2N/
You can easily accomplish that with JQuery.
$(document).ready(function(){$("#first").hover(function(){$("#second").hide();}, function(){$("#second").show();});});
Explanation:
this code adds a "hover" handler for the first element on document.ready, when the mouse enters we hide the second element, and when the mouse leaves, we show it again.
This way, it will work no matter where the elements are within the layout.
See here: http://jsfiddle.net/avrahamcool/RenK2/
Edit
If you want the second div to hide when the first one is clicked, use $("#first").click(function(){$("#second").hide();}) instead of hover(..)
See here: http://jsfiddle.net/avrahamcool/RenK2/1/
Here is a simple way of doing it:
If you have HTML similar to this:
<div class="wrap">
<div class="first">First div</div>
<p>some other element...</p>
<div class="second">Second div</div>
</div>
your CSS would be:
.first:hover ~ .second {
display: none;
}
Demo at: http://jsfiddle.net/audetwebdesign/HQN6n/
The one limitation that .first and .second must be sibling elements within the same parent element, .wrap in this example.
The general sibling combinator ~ is supported for IE7+
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors
In this example http://jsbin.com/inoka4 no width is defined for parent element
if i want to wrap red boxes in container border.
then we can make this in 5 ways
to giving float also to <div class="container">
overflow:hidden or overflow:auto
any clearfix hack to <div class="container clearfix">
Giving height to <div class="container">
adding one more html element (for example another div or <br >) after 2
boxes in <div class="container"> enter code hereand give
clear:leftor:bothor:right` to that
element
my question is any other option except float do not make any changes in <div class="container"> and inner boxes width. but if we use float:left or right to parent box then it's shrink the whole box and inner-boxes as well.
Why?
example link: http://jsbin.com/inoka4
Edit: My question is not about which method i should use, the question is why Float shrink the width
I think the better option is to use overflow:hidden. It is a simple one line change and it works.
div#container {
...
overflow: hidden;
}
Adding extra divs for clear fix requires changes in html for something that is really css. Alternatively, when using clear fix by doing hacks like...
div:after {
content:....
...
}
your css just gets bigger and messier. But it still is a good option (especially when you need to have things that overflow the box)
Reference:
http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/
If you dont' use float on the container it's width is set to 100%. If you add a floating, it only takes the space it needs. In this case the width is calculated by the two divs inside.
To wrap the red boxes in the container border there is not other option except adding float to the container. The only other option would be to absolutely position all the elements but in this case you have to know the width and height of all elements in advance. So that really isn't an option.
So my advice is to use float on the container and add a clear: both on the element after the container.
Your best bet is to always clear your floats. Just after you close the div with class .right, and just before you close the div with class .container, add a new div like this:
<div class="clear"></div>
.clear is just {clear:both;} in your stylesheet. That's what I use all day long, and works like a treat.
The final markup would be:
<div class="container">
<div class="left"> ... </div>
<div class="right"> ... </div>
<div class="clear"></div>
</div>
Edit: Just like your last example, apparently. :)
I ma having an issue with divs and css and especially floats.. I need to convert a page that is heavy using tables and columns and rows, my idea is to create a div for each column but of course i need to float these.
What are the rules for floating? I should float left each Div until i come to the end and then i must "clear" the float?
Is it good practice to use Width / Height on a div others i can't float them correctly?? or is it better to use min-height ?
Of course my idea is removing all the css stuff to a css external style sheet so i presume i need to give each div and ID so that i can assign a float / style to it... or of course if they are all the same i can assign a css class?
Any help really appreciated
Thank you
<div id="mytable">
<div class="left"></div>
<div class="right"></div>
<div class="clearer"></div>
</div>
<style>
.left,.right {
float:left;
width:100px;
}
.clearer {
clear:both;
height:0;
}
</style>
This is the way i style my "tables", it works in all browsers.
This might be helpful:
http://www.vordweb.co.uk/css/replacing-tables.htm
http://snook.ca/archives/html_and_css/getting_your_di
I am having an issue with divs and css and especially floats.. I need to convert a page that is heavy using tables and columns and rows, my idea is to create a div for each column but of course i need to float these.
Sounds fine. Beware, though, that converting table layout to CSS layout might be tricky if you want to keep the appearance 100% the same.
What are the rules for floating? I should float left each Div until i come to the end and then i must "clear" the float?
Let me answer by example:
<div style="float: left;">Column 1</div>
<div style="float: left;">Column 2</div>
<div>Column 3</div>
<div style="clear: left;">Stuff below the three columns</div>
Is it good practice to use Width / Height on a div others i can't float them correctly?? or is it better to use min-height ?
That depends on whether you want the width/height to depend dynamically on the content or if you want it fixed. min-height can be useful in a lot of cases, but I think the question is too general to be answered.
Of course my idea is removing all the css stuff to a css external style sheet so i presume i need to give each div and ID so that i can assign a float / style to it... or of course if they are all the same i can assign a css class?
Yes.