Is something like this possible?
.imgbox:hover{ .ui-resizable-se { /*some style */ } }
Or a conceptual equivalent?
Basically, only when an element of a certain class is hovered over, then some element within that class should change some style.
You can do this:
.imgbox:hover .ui-resizable-se { /*some style */ }
The same can be generated by LESS or SASS.
Sure that would be :
.imgbox:hover .ui-resizable-se { /*some style */ }
No, CSS does not allow nesting. You'd have to write it like this:
.imgbox:hover .ui-resizable-se { /*some style */ }
However, there are various CSS preprocessors available which convert something like this in valid CSS. The most popular ones are LESS and SASS/SCSS.
Not with plain CSS but you can with a CSS preprocessor like Sass:
http://sass-lang.com/
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
Generates:
/* CSS */
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}
Related
I have some markup that looks about like this -
<div class="card">
<div class="card__icon">Icon</div>
<div class="card__text">Text</div>
</div>
Which I am styling with a little LESS like so -
.card {
&__icon {
font-size: 1.75em;
#media (min-width: 992px) {
font-size: 2em;
}
}
&__text {
font-size: 1em;
}
}
This works great - however the parent is getting toggled a class .current on it and I was trying to change one of the childrens styles using the same methods, but could not seem to get it working. I was trying this -
.card {
&__icon {
font-size: 1.75em;
#media (min-width: 992px) {
font-size: 2em;
}
}
&__text {
font-size: 1em;
}
&.current {
// this is not working
&__text {
color: red;
}
}
}
I can change the &__text inside the &.current to .card__text and it works fine - however I was wondering if there was a way I could keep the &__text syntax inside the &.current with using LESS. Thanks!
According to the documentation, the parent selector & expands to the whole parent nested rule, taking each nested rule parent as is and inserting it in place of `&, so in your case
.card {
&.current {
&__text {
color: red;
}
}
}
compiles to
.card.current__text {
color: red;
}
which is not what we want, because class current__text does not exist. To avoid that you may rearrange the class selectors in your less rules like so:
.card {
.current & {
&__text {
color: red;
}
}
}
which compiles to:
.current .card__text {
color: red;
}
A working example can be found in this codepen
Is there a way to put made classes inside a class?
e.g.
.my-upper-class{ .hidden-md, .hidden-sm, .hidden-lg}
Not with plain CSS, but with Sass, like so—
.hidden-sm {
background: red;
}
.hidden-md {
color: blue;
}
.hidden-lg {
font-size: 1em;
}
.my-upper-class {
#extend .hidden-sm;
#extend .hidden-md;
#extend .hidden-lg;
}
which outputs the final CSS as below, which is pretty much what you are looking for.
.hidden-sm, .my-upper-class {
background: red;
}
.hidden-md, .my-upper-class {
color: blue;
}
.hidden-lg, .my-upper-class {
font-size: 1em;
}
I'm using Sass 3.4.1 and BEM so my scss is:
.photo-of-the-day{
&--title{
font-size: 16px;
}
}
and I want every time hover over .photo-of-the-day something happen with title, that's pretty common so usually in css:
.photo-of-the-day:hover .photo-of-the-day--title{
font-size:12px
}
the thing is using BEM this is the only way I found and looks kinda ugly
.photo-of-the-day{
&--title{
font-size: 16px;
}
&:hover{
background: red;
/* this is ugly */
.photo-of-the-day--title{
text-decoration: underline;
}
}
}
so I was wondering if I can inherit .photo-of-the-day selector and use it inside the hover to avoid copy again the full selector.
Ideally would be something like:
.photo-of-the-day{
&--title{
font-size: 16px;
}
&:hover{
background: red;
&&--title{
text-decoration: underline;
}
}
}
Or something close to comeback to the parent selector for BEM. Is it possible?
If you insist on nesting everything, the best you can do is this:
.photo-of-the-day {
$root: &;
&--title{
font-size: 16px;
}
&:hover{
#{$root}--title {
text-decoration: underline;
}
}
}
You can use this syntax:
.photo-of-the-day {
&--title {
font-size: 16px;
}
&:hover &--title {
text-decoration: underline;
}
}
Here's the sample:
.my-class {
font-size: 12px;
}
.my-another-class {
/* here I want to include .my-class style */
.my-class;
border: 0;
}
Can I include one css class into another or not?
You can define multiple targets for the .my-class rule, then specify further rules just for .my-another-class:
.my-class,
.my-another-class {
font-size: 12px;
}
.my-another-class {
border: 0;
}
You can even then override certain properties, for example
.my-class,
.my-another-class {
color: red;
font-size: 12px;
}
.my-another-class {
border: 0;
color: blue; /* overrides color: red; on .my-another-class */
}
You can't use a construction like this in plain CSS.
Preprocessors such as Less and Sass support this behaviour with mixins.
You can't, but you can do something like this:
.my-class, .my-another-class{
font-size: 12px;
}
.my-another-class {
border: 0;
}
I have a simple border style say:
.border
{
/*content*/
}
I want several other classes to inherit this border style. Can this be done in CSS only?
Or do I need to specify it in HTML also?
I want:
.actionArea : .border
{
/*content */
}
Or can this only be done in HTML like:
<div class="actionArea border"/>
It would be very annoying if the latter is only possible.
Update
This works good enough, but still is a bit ugly:
.actionArea, .otherArea, .anotherArea
{
/*border specification */
}
.actionArea
{
/*area specification/*
}
.otherArea
{
/*area specification/*
}
(..)
You will need to use a CSS framework such as LESS for such a thing.
You may use sass . Probably it is the nesting feature you want to use http://sass-lang.com/#nesting
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
Or as Oded said you can use LESS . LESS is having some interesting feature one of them is mixins . This is not exactly inheritance but it gives you has-a relationship in css
Example copied from LESS
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}