I'd like to know how to write a css block that applies to either multiple ids or multiple classes:
Something like:
.class1, .class2 {
...
}
or
#id1, #id2 {
...
}
I'd like to know how to do both cases (which hopefully are cross browser compliant). Thanks.
Update: To make it more interesting, is this valid too?
#id tr, #id2 tr {
}
?
You are looking for something like this :
.oddBoxOut,
.evenBoxOut {
width: 12em;
padding: 0.5em;
margin: 0.5em;
border: solid 1px black;
}
.oddBoxOut {
float: left;
}
.evenBoxOut {
float: right;
}
Update :
p#exampleID1 { background-color: blue; }
p#exampleID2 { text-transform: uppercase; }
For your update it is also valid,
#id1 tr {
}
means that every child of node id #id1 will be CSS'ed.
you can do this too
tr#id1 {
}
Only tr will be affected if id == #id1
Related
My HTML:
<div id="form" class="special">
<div class="header">My special form</div>
<div>
And the following sass code:
#form {
.header {
padding: 20px 10px;
.special & {
background: $special-color;
}
}
}
Which produces:
#form .header {
padding: 20px 10px;
}
.special #form .header {
background: #7cc52c;
}
However this doesn't give me the result I want. Instead of the CSS above I want to have: .special#form .header (the element form with class special, not the element .special which has form)
You can achieve your desired css this way.
#form {
.header {
padding: 20px 10px;
#at-root #{selector-replace(&, '#form', '.special#form')} {
background: blue;
}
}
}
This scss compiles to the following css
#form .header {
padding: 20px 10px;
}
.special#form .header {
background: blue;
}
Using the selector-replace function, you can easily change the part of the compound selector that needs changing. In this example, that would be replacing #form with .special#form. The #at-root directive ensures that the selector is placed at the top level and not nested within any selector.
When the parent selector is appended and nested as you did in your question, it reverses the selector. There are situations where this might be useful, one such situation is when working with Modernizr as illustrated in one of the slides on here
Hope this helps.
The simplest way to do this is by using #at-root and interpolation
$special-color:#7cc52c;
#form {
.header {
padding: 20px 10px;
// use #at-root to move .special out of #form .header
#at-root {
// append #form .header using the & selector
// note! you need to use interpolation #{} to
// remove the white space between .special and #form
.special#{&} {
background: $special-color;
}
}
}
}
LESS (CSS)
see in action
.app {
#page {
.inner {
.left {
&.padding-left-10px {
padding-left: 10px;
// rtl direction
.rtl& { //////////////////////////////////
padding-left: 0;
padding-right: 10px;
}
}
}
}
}
}
Consider the line I have highlighted with ///.....
I want the same result in SASS (.scss). Is it possible?
Expected result should be:
.rtl.app #page .inner .left.padding-left-10px {}
and not
.rtl .app #page .inner .left.padding-left-10px {}
Thanks.
It looks like you are attempting to use the LESS feature where you can change the order of the selectors by using the parent selector. It isn't working as expected because that specific LESS feature isn't implemented the same way in SASS.
If you want the equivalent output code in SASS, then you can use the #at-root directive in order to scope the selector to the root. Then you would also need to use variable interpolation (i.e., .rtl#{&}) for the parent selector:
.app {
#page {
.inner {
.left {
&.padding-left-10px {
padding-left: 10px;
#at-root {
.rtl#{&} {
padding-left: 0;
padding-right: 10px;
}
}
}
}
}
}
}
Which would compile to:
.app #page .inner .left.padding-left-10px {
padding-left: 10px;
}
.rtl.app #page .inner .left.padding-left-10px {
padding-left: 0;
padding-right: 10px;
}
Josh gave you an answer which will work, i guess. But I still wanna give you some advice and that is look into BEM, or someway. Nesting like this is really unnecessary.
Your code could be better for readability.
For example:
.padding {
padding: 10px;
}
.padding--left { // This is a modifier for padding
padding: 0 0 0 10px;
}
.padding--right { // This is a modifier for padding
padding: 0 10px 0 0;
}
<div class="padding padding--left">Using it in a div</div>
You don't have to follow all the rules which are defined in BEM, but some are really nice to use.
I am trying to make some LESS from my css, for now i have made a lot, but i have problem with long selector of KENDO Grid, it wrappes element in strange places and then it is hard to find. This is what i have for now on
LESS
.k-grid {
.k-pager-wrap {
.color-background(#white);
border-top: 0 none;
}
.k-grid-header {
.color-background(#white);
thead tr[role="row"]:first-child {
display: none;
}
.k-grid-header-wrap {
table {
thead {
tr {
th.k-header {
font-size: #font-size-large;
}
}
}
}
}
}
.k-grid-content {
overflow: auto !important;
}
}
.k-pager-numbers {
li {
a.k-link {
.color-text(#grey) !important;
&:hover, &:active, &:focus, &:visited {
.color-background(#grey-background) !important;
.color-text(#brand) !important;
}
}
.k-state-selected {
.color-background(#grey-background) !important;
border: medium none;
.color-text(#brand);
}
}
}
the problem is that i have is with another CSS that i am trying to put inisde of this k-grid, here is
CSS
.k-grid-header-wrap table thead tr.k-filter-row th span.k-filtercell span.k-operator-hidden button.k-button.k-button-icon {
height: 26px;
}
.k-grid-header-wrap table thead tr.k-filter-row th span.k-filtercell span.k-operator-hidden button.k-button.k-button-icon span.k-icon.k-i-close {
margin-bottom:18px;
}
table thead tr.k-filter-row th span.k-filtercell span.k-operator-hidden span.k-widget.k-autocomplete.k-header.k-state-focused,
table thead tr.k-filter-row th span.k-filtercell span.k-operator-hidden span.k-widget.k-autocomplete.k-header.k-state-hover {
.lh-box-shadow(none) !important;
border-color: #grey-border !important;
}
.k-grid-header-wrap table thead tr.k-filter-row th {
padding-top:5px;
padding-bottom:5px;
}
div.k-grid-header div.k-grid-header-wrap {
border-right-width: 0;
width: 101%;
}
As you may see it is veery long selector, but all my CSS i need to convert to less I already have, just to append the LESS, can somebody help me. I have lost entire day for making this previous LESS now with this CSS i have no luck. Txanks
you can give variables for your selectors.
Your code can be like this:
#first-long-selector: ~"span.k-filtercell span.k-operator-hidden button.k-button.k-button-icon";
#second-long-selector: ~"span.k-filtercell span.k-operator-hidden span.k-widget.k-autocomplete.k-header";
#short-selector: k-grid-header;
#table-selector: ~"table thead tr.k-filter-row th";
.#{short-selector}{
&-wrap{
#{table-selector}{
#{first-long-selector} {
height: 26px;
.k-icon.k-i-close{
margin-bottom:18px;
}
}
}
}
}
#{table-selector}{
#{second-long-selector}{
&.k-state-focused,
&.k-state-hover{
.lh-box-shadow(none) !important;
border-color: #grey-border !important;
}
}
}
.#{short-selector}{
&-wrap{
#{table-selector}{
padding-top:5px;
padding-bottom:5px;
}
}
}
.#{short-selector}{
& &-wrap{
border-right-width: 0;
width: 101%;
}
}
Here is an example
LESS recognizes CSS. So you don't necessarily have to convert your CSS to LESS. Just copy it in as is if you just want to get it working.
As I understand in LessCSS added feature which allows us to select parent element.
Here is an example of it.
.header {
.menu {
border-radius: 5px;
.no-borderradius & {
background-image: url('images/button-background.png');
}
}
}
The output will be.
.header .menu {
border-radius: 5px;
}
.no-borderradius .header .menu {
background-image: url('images/button-background.png');
}
But what if I want to be the output like this. Is it possible or no.
.header .no-borderradius .menu {
background-image: url('images/button-background.png');
}
Thanks for your attention.
I'm using LESS and want to match an special input whose type is text.
Currently, I'm doing this:
td {
input[type=text] {
width: 100px;
}
}
For my second input of type checkbox, I need another width. I tried this:
td {
input[type=text] {
width: 100px;
&:nth-child(2) {
width: 40px;
}
}
}
But this won't work. Any ideas how to combine [type=text] with :nth-child()?
Your LESS should translate to the following CSS without any bugs:
td input[type=text] {
width: 100px;
}
td input[type=text]:nth-child(2) {
width: 40px;
}
However, if you have other elements as siblings of your text inputs, these may be interfering with the :nth-child() declaration, as :nth-child() only looks at an element's position relative to all its other siblings in the same parent, not only to other elements of its kind (i.e. input[type=text]). For example, if you had a label as the second child, then your input won't be the second child anymore as that spot has been taken by the label.
If the only inputs you have within your td are all of [type=text] you should be able to get away with using :nth-of-type() instead:
// LESS
td {
input[type=text] {
width: 100px;
&:nth-of-type(2) {
width: 40px;
}
}
}
/* CSS */
td input[type=text] {
width: 100px;
}
td input[type=text]:nth-of-type(2) {
width: 40px;
}
Just remember, though, that it only looks at the element name input and not the [type=text] attribute!
Or if you know you'll only have two text inputs you can use the general sibling selector instead to grab the one that follows the first input:
// LESS
td {
input[type=text] {
width: 100px;
& ~ input[type=text] {
width: 40px;
}
}
}
/* CSS */
td input[type=text] {
width: 100px;
}
td input[type=text] ~ input[type=text] {
width: 40px;
}