I'm trying (and have succeeded) in selecting a div, it's child, and it's pseudo before/after elements, using the following syntax, but I want to know if there is a simplified way of doing it?
After some research I found the following scss works for the html/scss (link to JSFiddle is below also):
HTML
Want to add a class all-borders-hidden to reveal-div element, which will then make the div itself, it's child/children, and both pseudo elements update to have no border:
<div class="reveal-div">
Parent Div
<div class="main-image-div">
Main Cild Div
</div>
</div>
scss
.reveal-div {
border: 2px solid black;
// I toggle the all-borders-hidden class on the parent/ancestor
// reveal-div class element
// The following works, but it's a bit verbose - can it be simplified
&.all-borders-hidden {
border: none;
}
&.all-borders-hidden *{
border: none;
}
&.all-borders-hidden::after{
border: none;
}
&.all-borders-hidden::before{
border: none;
}
}
I have the exmaple running in jsfiddle
You can use & again:
.reveal-div {
border: 2px solid black;
// I toggle the all-borders-hidden class on the parent/ancestor
// reveal-div class element
// The following works, but it's a bit verbose - can it be simplified
&.all-borders-hidden {
border: none;
* {
border: none;
}
&::after{
border: none;
}
&::before{
border: none;
}
}
}
and if they are sharing the border:none you can do this:
.reveal-div {
border: 2px solid black;
// I toggle the all-borders-hidden class on the parent/ancestor
// reveal-div class element
// The following works, but it's a bit verbose - can it be simplified
&.all-borders-hidden {
&,
*,
&::before,
&::after{
border: none;
}
}
}
Related
I have a style like so-
button,
a.button,
input[type="button"] {
color: red;
}
button {
border: none;
}
a {
.button {
border: 1px solid purple;
}
}
Is there any way to combine them all into one declaration by nesting them?
Just play around styled component recently and just wonder why I cannot use first-child and last-child at the same time which I can apply similar concepts when I using SCSS
What I want to do is to have customized style based on whether they are the first or last child of RowWrapper but no luck. Just want to know whether I have missed some concepts? Thank you very much in advance.
Reference link:
sandbox link using styled component
Testing link using SCSS
const RowWrapper = styled.div`
:first-child {
border: solid 1px black;
color: red;
}
:last-child {
border: solid 1px red;
color: green;
span {
font-size: 22px;
}
}
`;
`
You're applying the pseudo-classes to the RowWrapper component itself. To apply them to the children, prepend a >:
const RowWrapper = styled.div`
>:first-child {
border: solid 1px black;
color: red;
}
>:last-child {
border: solid 1px red;
color: green;
span {
font-size: 22px;
}
}
`;
Is there a way to use SASS/CSS to set a style for an element that has a common class as well as another. For example, I would like the border to appear for elements that are either:
<div class="plate eggs"></div>
<div class="plate bacon"></div>
but not:
<div class="plate"></div>
The code I have at the moment but I'm sure there's a way to combine the two rules?
.plate {
border: none;
&.eggs {
border: 1px solid red;
}
&.bacon {
border: 1px solid red;
}
}
SCSS:
.plate {
border: none;
&.eggs,&.bacon {
border: 1px solid red;
}
}
SASS:
.plate
border: none
&.eggs,&.bacon
border: 1px solid red
You can validate your styles in sassmeister.
Why not add another class ? But if that's not the case, I'd use :not([class]) . Ormaybe even further, you can consider using div[class^="eggs"]
Hello I am wondering is it possible to do something like this in less. I have this css:
.parent{display: block; color: red; border: yellow 1px solid;}
.parent a, .parent a.special-link{color: blue; border-color: green;}
I would write it in less like this:
.parent{
display: block;
color: red;
border: yellow 1px solid;
a, a.special-link{
color: blue; border-color: green;
}
}
And rules are ok but what if in further developing I have to add something to :hover but only for it eg. padding: 20px; What is the best way to do this? My first thought is that if there is some kind of workaround/hack/selector that allows to inherit all properties of parent.
I doubt I clearly understand your exact needs (":hover" of what? "only" for what "it"?)
But in general it usually goes like this:
.parent {
display: block;
color: red;
border: yellow 1px solid;
a {
// <a> properties:
// ...
&, &.special-link {
// <a> and <a.special-link> properties:
// ...
color: blue;
border-color: green;
}
&.special-link {
// <a.special-link> properties:
// ...
}
&:hover {
// <a:hover> properties:
// ...
}
/// etc. etc. etc.
}
}
I am trying to add a border to an image on rollover. The border is not showing when I roll over the image. Here is my code:
<script>
$(document).ready(function() {
$("#imgBorder").hover(
function() { $(this).addClass("Hover"); },
function() { $(this).removeClass("Hover"); }
);
});
</script>
Hover { border: 1px solid #000; }
<div id="imgBorder">link...
Why isn't the border appearing on hover?
Also, is there any way to do this so that it does not re-size the image when adding the border?
You do not need to use javascript to add hover on image rollover. Just add it to the css class instead.
<style language="text/css">
.rollOver : hover
{
border: 1px solid #000;
}
</style>
<div class="rollOver" id="imgBorder">Test</div>
First, to affect the image, your jQuery should be:
$("#imgBorder img").hover(
function() { $(this).addClass("Hover"); },
function() { $(this).removeClass("Hover"); }
);
And your CSS should be:
.Hover { /* note the period preceding the 'Hover' class-name */
border: 1px solid #000;
}
JS Fiddle demo.
Note that:
.string selects element(s) by their class-name of string: <div class="string"></div>
#string selects an element by its id, which is equal to string <div id="string"></div>
string selects an element of string: <string></string>
But you don't need JavaScript, just use:
#imgBorder:hover img,
#imgBorder img:hover {
border: 1px solid #000;
}
JS Fiddle demo.
Something like this will work in CSS, link below
.rollover_img {
width: 280px;
height: 150px;
background-image: url(land.jpg);
background-position: top;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:10px solid #ccc;
font:13px normal Arial, Helvetica, sans-serif;
line-height:18px;
float:left;
margin:0 10px 10px 0;
}
I will direct you to the following link
http://aceinfowayindia.com/blog/2010/02/how-to-create-simple-css-image-rollover-effect/
In your selector below, you're targeting an element with the tagname "Hover". This does not exist.
Hover { border: 1px solid #000; }
What you wanted instead was:
.Hover { border: 1px solid #000 }
As others here have already pointed out, you don't need JavaScript for this as you can use the :hover pseudo-class:
img { border: 1px solid #FFF }
img:hover { border-color: #000; }
For further reading, see http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes