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.
Related
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{}
I have a bunch of divs which I nest arbitrarily:
<div>
<div>
<div>Apple</div>
<div>
<div>Banana</div>
<div>Grape</div>
</div>
</div>
<div>Craisin</div>
</div>
I make their contents pink with a rule like this:
div { color: pink; }
I want to be able to add the special class to any of those divs to cancel out the pink rule for it and all of its children. For example, if I add the special class to this div,
<div>
<div class="special">
<div>Apple</div>
<div>
<div>Banana</div>
<div>Grape</div>
</div>
</div>
<div>Craisin</div>
</div>
then "Apple," "Banana," and "Grape" should no longer be pink.
Can I tweak my rule to only match divs that aren't nested inside a .special?
I'm not looking for a solution involves writing a rule for .special that cancels out every style defined on div. For example, this is not a good solution even though it works:
.special, .special div { color: black !important; }
My actual styles are more complicated than just changing the color, and there are other rules with selectors like div span which I would also like to disable with the special class.
You cannot prevent children/descendants from inheriting inheritable style properties using CSS.
The style properties for the descendants have to explictly be reset.
Is there an easy way to target all 3rd layer elements?
For example, my right column layout is as follows:
<div class=right_column>
<div class=module>
<div>
<p></p>
</div>
</div>
<div class=different_module>
<div>
<p></p>
</div>
</div>
</div>
How do I target both non-classed <div> elements in this instance without specifying each one individually?
Like this: .right_column > div > div
> is the "Child Selector" - check out this top-notch article on CSS Tricks.
You should be able to do something like this
div > div > div{
/* styles here */
}
> is a child-selector.
Here it says select and use the div that is a child of a div that is a child of a div.
Here is an example: http://jsfiddle.net/hbXsE/1/
Note: the HTML you provided has a few missing div tags and some closing span tags. I redid it for the example.
You could use the selector div.right_column div div but it will also match divs nested more deeply. To avoid this on most newer browsers, you could use the child selector, like this: div.right_column > div > div but it won't work in older versions of IE
In the markup below, I'm looking for a way (perhaps using css selector's) to style the content div differently depending on the presence of menu? Menu may or may not be present in that location in the markup and if it is there, I need to add some top margin to content.
I believe sibling and descendent selector rules might not go this far...
"When menu is present as a child of header set the top margin of content (whose parent is a sibling of header) to 100 pixels. Otherwise, set it to zero"
<div class="header">
<div class="sitetitle">site title</div>
<div class="tagline">tagline</div>
<div class="menu">menu</div>
</div>
<div class="main">
<div class="content">content goes here</div>
</div>
If css allowed groupings, I would do it this way...
(.header ~ .menu) + (.main > .content) {margin-top:100px;}
Not possible in your markup.
CSS selectors can only look at the ancestor and at the sibling axes. You cannot look inside ("what children do I have") - only upwards ("what are my parents") and sideways ("what's next to me").
Examples. This:
div.header div.menu
refers to any <div class="menu"> one of whose ancestors is a <div class="header">.
This:
div.header > div.menu
refers to any <div class="menu"> whose direct ancestor (i.e. "parent") is a <div class="header">.
This:
div.header ~ div.menu
refers to any <div class="menu"> that has a <div class="header"> among its preceding siblings, i.e. they have the same parent and occur one after another, but not necessarily adjacent to each other (that's "looking sideways").
This:
div.header + div.menu
refers to any <div class="menu"> whose direct preceding sibling is a <div class="header">.
There are no other traversing selectors in CSS (this statement refers to CSS2) and certainly there are no conditionals.
You could use jQuery:
$('.header:has(.menu) + .main > .content').css('margin-top', '100px');
Unfortunately the :has() selector didn't find its way into css3.
But why don't you simply apply a margin-bottom to div.menu?
You could possibly use some javascript to detect that. Check if menu is under header at load, and if it is, then set the margin-top of content to 100px
I used this CSS code in a conditional formatting.
Format index by counting from the end.
#stk-service-account-menu ul li:nth-last-child(1):before {
I'm trying to style all html with the class called sample
<div class="sample">
</div>
.sample{
}
But I'm running into a situation where the class sample could be nested. In this case I want to style only the inner one. How can I tell the css to apply the style only to the inner div and not to the outer sample? Can this be done?
<div class="sample">
<div class="sample">
</div>
</div>
Use the descendant selector for your ruleset:
.sample .sample
If you want to maintain the style on your outer div, then I'd suggest giving it another class, like
.something .sample
Using the same class for all the elements on a page is highly discouraged.
You could use Child Selectors:
div>.sample {}
or:
div.sample>.sample {}