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;
}
}
Related
:before {
margin: 10px
}
I would like to apply the above SASS/CSS to :before element in the following:
<div class="embed">
:before
<iframe class="my-iframe">
</div>
I do not want to apply the same css to the :before element in the following, the css should only apply when there is an adjacent iframe with class "my-iframe"
<div class="embed">
:before
<iframe class="some-other-iframe">
</div>
Is it possible to do so?
You could utilize #at-root for this.
.my-iframe {
color: blue;
#at-root .embed:before #{&} {
margin: 10px;
}
}
Which compiles to
.my-iframe {
color: blue;
}
.embed:before .my-iframe {
margin: 10px;
}
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;
}
I have three divs when hovered changes the text right below them (This is Text A, This is Text B, This is Text C). The default active text is Text B.
I want to the color of div.b to change when I hover over div.c
I have this working for the hover over div.a:hover
Fiddle
HTML
<div class="onHoverText">
<div class="a">Text A</div>
<div class="b">Text B</div>
<div class="c">Text C</div>
<div class="outputBox">
<span>This is Text B</span></div>
</div>
CSS
.onHoverText {
cursor: pointer;
}
.a, .b, .c {
display: inline-block;
margin-right: 3%;
font-size: 15px;
}
.b {
color: #FF0004;
border-right: thin dashed #3A3A3A;
border-left: thin dashed #3A3A3A;
padding: 0 2%;
}
.a:hover, .c:hover {
color: #FF0004;
}
.outputBox {
font-size: 36px;
}
div.a:hover ~ div.outputBox span, div.c:hover ~ div.outputBox span {
display: none;
}
div.a:hover ~ div.outputBox:after {
content:' This is Text A';
}
div.c:hover ~ div.outputBox:after {
content:' This is Text C';
}
div.a:hover ~ div.b:not(.active), div.c:hover ~ div.b:not(.active) {
color: #000;
}
I think the reason this isn't working is because the adjacent selector in CSS will only target elements after the target element:
The general sibling combinator selector is very similar to the adjacent sibling combinator selector we just looked at. The difference is that that the element being selected doesn't need immediately succeed the first element, but can appear anywhere after it.
Source CSS Tricks
Here I am doing little trick to get closer to your requirement. I have added the following two new styles. Check the fiddle.
.onHoverText:hover .b{color:#000;}
.b:hover{color:#FF0004 !important}
DEMO
There is no previous sibling selector in CSS.
You should use javascript as a workaround if you do not have the choice (here with jQuery) :
$('.a, .c').hover(function(){
$('.b').toggleClass('disabled');
});
With a simple css class :
.b.disabled {
color: #000;
}
jsFiddle Demo
HTML CODE
<div class="box">
<p class="turn">shou</p>
</div>
CSS CODE
.turn {
font-size: 50px;
text-align:center;
padding:150px;
color: white;
}
.box {
height:500px;
width:500px;
background-color: blue
}
.box:hover ~ .turn {
color: red;
}
jsfiddle
So, using my logic, after hovering on the div "box" text is supposed to turn red.
I'm quite unsure why it doesn't happen.
You are using sibling selector ~ but .turn is a child of .box element. So you need to use child selector i.e. >.
.box:hover > .turn {
color: red;
}
JsFiddle Demo
~ is the general sibling combinator. .turn is not a sibling of .box, so the style doesn't get applied.
You could use .box:hover .turn
You are using the wrong selector:
This will work!
.box:hover > .turn {
color: red;
}
try this...
.box:hover .turn{
color:red;
}
~ CSS selector is called the Sibling Selector.
If your markup (HTML) were like this:
<div class="box">
</div>
<p class="turn">shou</p>
then your CSS would work perfectly because in the DOM tree, the <p> node is a sibling of the <div> node.
DOM Tree for above HTML:
<document-root>
|
|
_______|_______
| |
<div> <p>
But in your markup, the <p> element is actually a child node of the <div>. And the DOM tree would be:
<document-root>
|
|
<div>
|
|
<p>
So you should use a child selector > since the <p> is a direct child or you could simple leave a space between .box and .turn (this is the descendant selector).
So your final CSS should be:
.turn {
font-size: 50px;
text-align:center;
padding:150px;
color: white;
}
.box {
height:500px;
width:500px;
background-color: blue
}
.box:hover .turn {
color: red;
}
Updated fiddle: http://jsfiddle.net/sH3Dh/7/
.box .turn:hover{
color: red;
}
Also u can use:
.box p.turn:hover{
color: red;
}
if you can use padding on .box so use this
.box:hover >p.turn{
color: red;
}
No...because ~ is a sibling selector whereas, in your example, the .turn element is a child of .box
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
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?