I have some problem that i want to change it with css
<div class="a">
<div class="b">
<span></span>
</div>
<div class="c">
<span></span>
</div>
<div class="d">
<span class="e"></span>
</div>
</div>
I want to change background of div.b and div.c by using span.e
Please help me.
Thanks
The following answer assumes you are asking how to use span.e as part of a selector to change the rules for div.b and div.c. For example:
span.e:parent:prevAll.b { background:red } // concept-code, doesn't actually work
You can't do that with CSS alone, you would need to use something like jQuery (javascript) to handle this for you. With CSS, you can reference children from parents, but not parents from children. Or in this case uncles from nephews...
At current, CSS cannot go up the chain (child to parent) only down the chain (parent to child). You could probably use jQuery to do what you want here, but you should probably rewrite the HTML so its not difficult.
You can't do that with CSS, you'd need something like jQuery. It's difficult to know exactly what to suggest since it's unclear how you want the system to work, but this should help:
$('.e').parents('div').eq(0).addClass('red');
You would already have a class in your CSS: .red { background-color: red; } (you might want to name it better though).
Related
So lets say I have a custom element
<template>
<style include="stylesheet"></style>
<div class="main">
stufff
<other-custom-element></other-custom-element>
</div>
</template>
and "other-custom-element" is
<template>
<style include="stylesheet"></style>
<div class="main">
stufff
</div>
</template>
and "stylesheet" is
.main {
padding: 10rem;
}
How to I make it so the padding from "other-custom-element" will not show up on the custom element without removing the padding from that element? Just want the padding gone while I'm on the parent page.
So far I've tried:
other-custom-element .main{
padding: 0;
}
and giving the "other-custom-element" a class and trying that:
.other-custom-element-className .main {
padding: 0;
}
I'm not terribly good at Polymer and I did not make this website, I'm merely the CSS guy making it look good. I figured it wouldn't hurt to ask here while I continue to try to solve this in case someone figured it out sooner or already knew. If I find the solution before someone can answer I'll be sure to share.
Try removing the other-custom-element and .other-custom-element-className these break it. The thing is Polymer uses ShadowRoot which does not allow css to change it´s children. So every Polymer Element needs its own css file which is always relativ to the Element itself. You will find the Documentation here.
The short answer is as far as I know, you cannot change child element parameters from a parent element, at least not the way I was doing it that's for sure. This is what I found out and my solution that worked.
So I'll add some dimension to the problem so you can understand my solution and why I did it.
<other-custom-element> was a page, and the element it was on was also a page. Both were pages, so both needed the margins and such and I could not remove those. The solution is using polymer the way it was meant to be used (in my opinion): making a page of elements.
One way to do polymer, is to have a page FULL of interchangeable elements. That way if you want to use them again you can.
What this means is making <other-custom-element> look something like this:
<template>
<style include="stylesheet"></style>
<style> /*custom css*/ </style>
<div class="main">
<other-page-element1></other-page-element1>
</div>
<div class="main">
<other-page-element2></other-page-element2>
</div>
<div class="main">
<other-page-element3></other-page-element3>
</div>
</template>
instead of this:
<template>
<style include="stylesheet"></style>
<style> /*custom css*/ </style>
<div class="main">
stuff
</div>
</template>
What this allows me to do now is with the new page I can simply pull the elements (whether it be some or all) from the <other-custom-element> page like so.
<template>
<style include="stylesheet"></style>
<style> /*custom css*/ </style>
<div class="main">
<this-page-element>
</div>
<div class="main">
<other-page-element2>
</div>
</template>
This was the correct way to deal with this instead of trying to do some css selector (also that wouldn't work anyways).
Hope my answer helps anyone else who runs into css issues with polymer!
Currently I have the following piece of code available which needs to be styled:
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
<p>summary</p>
<p>body</p>
</div>
I would like to keep the HTML as-is and style the 'p' of both the summary and the body in a different way.
Is that possible? How? Thank you!
Yep it is :
div p:nth-child(1){
color: red;
}
div p:nth-child(2){
color: blue;
}
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
<p>summary</p>
<p>body</p>
</div>
You need to use :nth-child() cssSelector to apply different styles for each tag. Look at below example.
div p:nth-child(1){
color:red;
}
div p:nth-child(2){
color:green;
}
You can either do that:
<p style="background-color:#000000;"></p>
Or do that:
First, add the "id" tag in your paragraphs tags.
<p id="bodyParagraph"></p>
Second, on the head tags include the:
<style>
#bodyParagraph{
background-color:#000000;
}
</style>
Why wouldn't you want to add specific classes to the summary paragraph and another for the body paragraph? Nothing wrong with that.
<p class="summary"> and <p class="body"> with their respective styling.
If you really want to avoid using a specific class for each, I'd suggest checking out the :first-child and nth-child pseudo-elements, so you style the first paragraph of that particular div one way and any other paragraphs a different way.
Assuming that the body paragraph might be multiple paragraphs, I'd strongly recommend against this approach since it will be hacky, more confusing, and more time consuming than just giving each paragraph its own style.
Sources:
W3Schools - first-child pseudo-element and W3Schools - nth-child pseudo-element
<div class="parent">
<div class="firstChild"></div>
<div class="secondChild"></div>
<div class="thirdChild"></div>
<div class="fourthChild"></div>
<div>
I am trying to style fourthChildbased on if secondChild exists under parent
I thought the below would work but Chrome says no. I dont want to use nth child because the DOM could change based on our program, the below seems very flexible but I'm doing something wrong.
.parent .secondchild ~ .fourthchild
{
css stuff
}
It's the correct solution, you just wrongly named your classes in the CSS, you forgot the caps.
.parent .secondChild ~ .fourthChild
http://jsfiddle.net/LeBen/Y6QDr/
It's case sensitive!
Do this:
.parent .secondChild ~ .fourthChild
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 had a brief look at the CSS3 Selectors spec but couldn't find anything how to get round this problem. Additionally, I wasn't expecting the result from this to change when you move the CSS declarations around but it does. Any help would be great.
div.green_colour div.has_colour{
background-color: green;
}
div.red_colour div.has_colour{
background-color: red;
}
<div class="red_colour">
<div class="green_colour">
<div class="has_colour">
I would like this to be green
</div>
</div>
</div>
<div class="green_colour">
<div class="red_colour">
<div class="has_colour">
I would like this to be red
</div>
</div>
</div>
You can use the E > F child selector as a solution to your problem as such:
div.green_colour > div.has_colour{
background-color: green;
}
div.red_colour > div.has_colour{
background-color: red;
}
According to this chart http://www.quirksmode.org/css/contents.html it is compatible with all major browsers and IE 7+
There are other ways to implement the solution above (e.g. via javascript) if you are interested.
-- Edit:
I'm not 100% sure if the reason for your solution not to work is due to the fact that browsers parse CSS from right to left instead of left to right, but I assume it has something to do with it. Someone please correct me if I'm wrong.