: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;
}
Related
I used two classes .swap and .cont. How to use .swap class style so that it won't effect .cont style.
.swap{
background-color: red;
padding: 10px ;
}
.cont{
margin-top: 10em;
color: blue;
}
<div class="swap">
<div class="cont">
<div class="container">test</div>
</div>
</div>
using :not css
:not(X) {
property: value;
}
You can either use the :not(nameOfSelector) css rule, as stated by Prajapati Ghanshyam who posted it first, or, even simpler and safer (for older browser compatibility's sake), you can override the css rules previously set by .swap by doing:
<style>
.swap{
background-color:red;
padding 10px 10px 10px 10px ;
}
.cont{
margin-top: 10em;
color: blue;
/* OVERRIDE */
background-color: #acolorofyourchoice;
padding: 0;
/* END OVERRIDE */
}
</style>
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;
}
}
Objective
I want the background color of my <p> (with the class of thumb-caption) to change when I hover over the parent container.
Background
I have this demo on codepen that has a hover state on the parent and on the <p> but the <p> only changes color when you hover in it directly.
HTML
<div class="system-thumb">
<a href="https://www.google.com/search?btnG=1&pws=0&q=why+is+juan+so+awesome&gws_rd=ssl" target="_blank">
<p><img src="http://placehold.it/360x180"><p>
<h2>Product</h2>
<p class="thumb-caption">You should totally buy this product, yay!</p>
</a>
</div>
CSS
.system-thumb {
margin: 0 auto;
max-width: 360px;
}
.system-thumb:hover {
outline: 1px dotted #00aba7;
}
.system-thumb .thumb-caption {
margin: 0;
padding: 10px 5px;
}
.system-thumb .thumb-caption:hover {
background-color: #00aba7;
color: #fff;
}
.system-thumb p img {
max-width: 100%;
}
Simple, apply the :hover psuedo-class to the parent element:
.system-thumb:hover p {
background-color: #00aba7;
}
Before:
.system-thumb .thumb-caption:hover {
background-color: #00aba7;
color: #fff;
}
After:
.system-thumb:hover .thumb-caption {
background-color: #00aba7;
color: #fff;
}
You need to assign who's going to have the event. In this case, <p> will be affected only if its parent is hovered. So, you need to move the :hover element to the parent selector.
Select the child (.thumb-caption) when it's hovered (.system-thumb:hover)
.system-thumb:hover .thumb-caption {
/* Your css codes*/
}
That's simple.
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
What is so annoying about CSS when you add style in the css class, it may apply other element/class by itself.
What the best way to prevent that?
For example:
HTML:
<div class='main-content'>
<p> Hello World </p>
<span> Test One </span>
<div class='column'>
<span> Test Two</span>
</div>
</div>
CSS:
.main-content span {
background: #921192;
color: white;
padding: 3px 4px;
margin: 0 5px;
}
.column span {
font-size:20px;
text-transform:none;
display:inline-block;
}
I do not want "Test Two" <span> to have a background color.
Test: http://jsfiddle.net/szm9c/1/
Use a selector that actually selects the elements you want. In this case >, the child selector, will suffice.
.main-content > span {
background: #921192;
color: white;
padding: 3px 4px;
margin: 0 5px;
}
http://jsfiddle.net/mattball/mQFz2/
Use .main-content > span, that selects only directly descendent elements.
This has nothing to do with inheritance.
To use CSS properly, assign properties to elements using selectors that match only the elements that you wish to affect. (The example given is far too artificial for a useful analysis and for constructive suggestions on a better approach.)
You can use this
.main-content > span {
background: #921192;
color: white;
padding: 3px 4px;
margin: 0 5px;
}
If you use like .main-content > span that style will only affect to the immediate child spans of .main-content class
Just use all: initial at your root element.
.selector
{
all: initial;
}