I have this structure:
<div class="Root">
<div>ddddddd</div>
<div>
<div>pppppppppp</div>
<div>pppppppppp</div>
</div>
<div>ddddddd</div>
<div>
I want to put borders on the divs that contain ddddddd, and I want to set the text color on all divs to green.
There are two rules:
I can't add class attributes.
I have to write selectors that start with .Root.
Any ideas?
Actually I was searching this:
Selects the divs that are direct children of Root:
.Root > div {
border: 1px solid red;
}
Selects all the divs under Root:
.Root div {
color:green;
}
Something like this?
.Root > :first-child, .Root > :last-child { border: 1px solid red }
.Root { color: green; }
Demo: http://jsfiddle.net/karim79/N5qFu/1/
I would advise you to go through this: http://www.w3.org/TR/css3-selectors/
.root {
border: 1px solid green;
}
Why are you not declaring class /id for other divs?
Related
So I have:
.element {
border: 1px solid red;
display: block;
}
but I'd like this rule to be ignored when .element is a child of .no-border using the :not pseudo-selector. Example:
<div class="element">I have a border</div>
<div class="no-border">
<div class="element">I don't have a border</div>
</div>
I am attempting to do this using the following:
:not(.no-border) .element {
border: 1px solid red;
display: block;
}
However, the border is still applying to .element if it is a child of .no-border.
https://jsfiddle.net/7Lox10pL/1/
Any help?
You should use direct descendent selector >:
:not(.no-border)>.element
JSFiddle
You could create a separate selector whenever it is a child of .no-border and override the styles with initial, e.g.,:
.no-border .element {
border: initial;
display: initial;
}
See the fiddle at JSFiddle.
Try this..
.outerclass {
h3 {
color: blue;
}
:not(.nested) (div > div)
{
color: green;
}
}
I need some 'derivative' css which is a child of my parent css. I want to import all of attributes of 'parent' css to my 'child' css.
I can't find a solution.
E.g.
.red {
color: red;
}
.more_red {
color: red;
border: 2 px solid red;
}
Is it possible to do something familar my pseudocode?
.red{
color: red;
}
.more_red <SOME TEXT WHICH SAYS 'THIS CSS IS A CHILD OF .red'>{
border: 2px solid red;
}
HTML
<p class='more_red'>texty text</p> <- this only I Need
<p class='red more_red'>texty text</p> <- not this
EDIT I need to create a css which consists of all of 'parent' css properties.
Only way to inherit/importing the styles defined in one rule to another in CSS is cascading. You cannot use extend as in LESS in CSS.
For inheriting the properties from other element, the parent-child hierarchy is necessary.
You can use direct child selector >
.red {
color: red;
}
.red > .more_red {
border: 2px solid red;
}
or descendant selector
.red .more_red {
border: 2px solid red;
}
By doing this, the styles of parent are inherited by children.
You can also use global selector *.
Ex. For setting the font-family across the site
* {
font-family: Helvetica;
}
You can also use element/type selector.
Ex. To set the style of all the anchors
a {
text-decoration: none;
color: #ccc;
}
a:hover {
text-decoration: underline;
}
Does a tag like this count as empty when forexample doing this?
HTML
<p>
</br>
</p>
CSS
p:empty {display:none}
No. For
p:empty {display:none}
to apply the p must actually be empty.
<p></p>
is empty and will take the style.
<p>
</p>
is NOT empty and will not take the style.
In the code below the border is added for illustration purposes only.
p { border: 1px solid red; }
p:empty { display:none }
<p></p>
<p>
</p>
No it doesn't. The :empty pseudo selector will select elements that contain either nothing or only an HTML comment.
<div></div>
<div><br/></div>
and
div {
width: 100px;
height: 100px;
border: 2px solid red;
}
div:empty {
border: 2px solid blue;
}
So here you will see only first div having border blue and second having border red.
Fiddle
Is it possible to create a conditional div display depending on another div's content being present or not? I'm looking for a CSS only solution.
I've used something like this before:
.myClass:empty:before {
content: 'content added to empty div';
}
to add content to an empty div. But since there is no way to create hyperlinks in the created pseudo-content, I'm looking for another way.
So let's assume my div structure is as follows:
<div class="div1"></div>
<div class="div2">This should be displayed</div>
Is it possible to do a css trick to display div2 if div1 is empty; but hide it if div1 has content?
Feel free to restructure the div hierarchy, what I'm looking for does not depend on the current div structure.
Looking for ideas. Thank you.
I'd suggest:
/* hiding the div.div2 element (and its content)
if it's the next element-sibling of div.div1: */
div.div1 + div.div2 {
display: none;
}
/* selecting the div.div2 element which is the next
element-sibling of an empty (div.div1:empty)
div.div1 element: */
div.div1:empty + div.div2 {
display: block;
}
/* hiding the div.div2 element (and its content)
if it's the next element-sibling of div.div1: */
div.div1 + div.div2 {
display: none;
}
/* selecting the div.div2 element which is the next
element-sibling of an empty (div.div1:empty)
div.div1 element: */
div.div1:empty + div.div2 {
display: block;
}
div.div1 {
border: 1px solid #f00;
color: #f00;
}
div.div2 {
color: #0f0;
border: 1px solid #0f0;
margin-bottom: 1em;
}
<div class="div1"></div>
<div class="div2">This should be displayed</div>
<div class="div1">This is 'div.div1' (it has content)</div>
<div class="div2">This should not be displayed</div>
use css- next element selecor
.div1:empty + div{
content: 'content added to empty div';
}
Thank you for the quick answers. Based on Alexis Peters' answer, I've created this one which worked like a charm. Putting it down for future reference:
div2 {
display: none;
}
.div1:empty + .div2{
display: block;
}
An explanation is (for explorers like me) CSS above says "set div2 to not display. If any .div2 follows an empty .div1 then set display to block".
Cheers.
I am trying to apply a css style to the first children of an element. So say I have a div, with two divs, which are the children, and within each child is their own child, which are the grandchildren.
This JSFiddle, I hope is what I've done: http://jsfiddle.net/o8xhba9u/
#parent {
border: 1px solid;
padding: 10px;
}
#child-one {
text-indent: 5px;
padding: 10px;
}
#child-two {
text-indent: 5px;
padding: 10px;
}
#parent * {
border-top: 1px solid red;
}
My goal is to only have the children (child-one and child-two) to only be the ones with the red border-top. The paragraph elements (grandchildren) shouldn't have the red outline. I am trying to accomplish this dynamically, as if I were to have different elements, and add new ones later and have the effect applied without having to edit the css. How can I accomplish that?
You are looking for the direct child combinator, >.
Example Here
#parent > * {
border-top: 1px solid red;
}