I have a list of html items and I need to select every 3 over 3. (1,2,3,7,8,9,13,14,15 e.t.c)
Please suggest me, is it possible to do using css nth-child selector and what formula should be in parentheses? Or only way is JavaScript?
Hooray! I've found the solution! Thanks for your answers!
My version is:
.item:nth-child(1+6n),
.item:nth-child(2+6n),
.item:nth-child(3+6n) {
/* styles */
}
Are all the elements of the same type? You might be able to use :nth-of-type(3). :nth-child selects children of children too if I am not mistaking.
What is your scenario(purpose)? There are many way to archive it ~
Here is one way use override technique:
li:nth-of-type(n+13) {
color: green;
}
li:nth-of-type(n+10) {
color: red;
}
li:nth-of-type(n+7) {
color: green;
}
li:nth-of-type(n+4) {
color: red;
}
li:nth-of-type(n+1) {
color: green;
}
I have write a simple demo with SCSS here:
https://jsbin.com/gihuki/1/edit?html,css,output
Related
I looking for a seating plan generator to add to my site. My seating information needs to come as an object. And I want to render the seating plan according to that. Is it possible to render something like below?
I have tried react seat picker too. but spaces between seats are not taken
the issue was in my CSS file commenting the blank attribute will fix the error.
div.seat {
background-color: green;
}
div.seat--reserved {
background-color: rgb(209, 7, 7);
}
div.seat--selected {
background-color: blue;
}
.seat-picker {
margin: auto;
}
.seat-picker__row {
}
.seat-picker__row__number {
}
/* div.blank {
display: none;
} */
I have data and each row/user is formatted something like this:
{
first: <string>
active: <bool>
}
I wish to apply a background color to the entire row if active property is false. Currently I have this, to try to get style applied to every row
rowClassName = (rowData) => {
return {'greyed' : true}; //will be {'greyed': !rowData.active} but this is for demonstration
}
<DataTable value={this.props.users.toJS()} //in render
selectionMode="single"
selection={user}
onSelectionChange={this.props.dispatch.editAccount}
rowClassName={this.rowClassName}
>
<Column field="first" header="First" filter={true}/>
</DataTable>
.greyed{ //in css
background-color: red;
}
which is only applying the style to every other row (see picture)
Any ideas on what I should try? i posted this question on the primeFaces forum 3 days ago and never got a response: https://forum.primefaces.org/viewtopic.php?f=57&t=58605
I just ran into this problem while trying out PrimeReact. My issue turned out to be that the default selector that sets the row background was more specific than my own.
This is the default:
body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
background-color: #f9f9f9;
}
so just having
.specialRowColor { background-color: 'blue' }
is not specific enough to override the default. Instead I needed to do this in my css:
.p-datatable .p-datatable-tbody .specialRowColor {
background-color: blue;
}
Solved by overriding the css like this
.ui-datatable tbody > tr.ui-widget-content.greyed {
background-color: #808080;
}
I'm going to create a less code that will give different background-color to element depending on it's class. This will be for list of attachments, so class name is based on attachment extension.
I do support some typical extensions:
.label{
&.label-pdf{
background-color: #c70000;
}
&.label-doc, &.label-docx, &.label-odt{
background-color: #157efb;
}
&.label-xls, &.label-xlsx, &.label-calc{
background-color: #069e00;
}
&.label-ppt, &.label-pptx, &.label-odp{
background-color: #9e3c15;
}
&.label-jpg, &.label-png, &.label-gif, &.label-png, &.label-ttf{
background-color: #95009e;
}
}
but the problem is with some unusual extensions, or even files like: jpg, jpeg, doc, docx, this is why I would like to use expression from CSS. In pure CSS I could use:
.label.[class^="label-"]{
background-color: rgba(0,37,100,0.4);
}
And put this code at the beginning so other classes could override this one.
But unfortunately this sign ^ (I suppose) is breaking my Less compilation. I have been trying to do something like this:
~".label.[class^='label-']{
background-color: rgba(0,37,100,0.4);
}"
AND
.label{
&.~"[class^='label-']"{
background-color: rgba(0,37,100,0.4);
}
}
But still not working. So is it possible to use this selector?
It is not working because your syntax seems to be wrong and not because of any issues with Less.
The below code is invalid because of the . present between the label and the class^="label-"]. Attribute selectors do not require a . before them. It is necessary only for class selectors.
.label.[class^="label-"]{
background-color: rgba(0,37,100,0.4);
}
The correct version would be the following:
.label[class^="label-"]{
background-color: rgba(0,37,100,0.4);
}
and so in Less terms, if you want nesting, it would be as follows:
.label{
&[class^='label-']{
background-color: rgba(0,37,100,0.4);
}
}
.label.[class^="label-"] { /* this won't work */
background-color: rgba(0, 37, 100, 0.4);
}
.label[class^="label-"] { /* this will */
color: green;
}
<label class='label-a label'>Label A</label>
<label class='label-b label'>Label B</label>
Another thing to note is that the ^= is a starts with selector and so when your element has more than one class, the class that resembles label- should be the first class in the list and not the label. If we make the label as the first class then (like seen in below snippet) it won't work because then the class doesn't start with label-.
If the first class in the list is indeed label then you should consider using the *= (contains) selector. But be careful when using the contains selector because it will sometimes select unintended elements like those with class label-not, not-label etc.
.label.[class^="label-"] { /* this won't work */
background-color: rgba(0, 37, 100, 0.4);
}
.label[class^="label-"] { /* this won't too */
color: green;
}
.label[class*="label-"] { /* this will */
border: 1px solid green;
}
<label class='label label-a'>Label A</label>
<label class='label label-b'>Label B</label>
I have same problem. I use this in less file.
[class^="customForm-"] { ... }
But for my HTML it does not works.
<div class="form form-01 customForm-radioList">...</div>
The problem is in tha fact that string "form form-01 customForm-radioList" does not starts with "customForm-" it starts with "form".
Solution
Use contains selector W3 school.
[class*="customForm-"] { ... }
I'm new to React, and I'm trying to render a static CSS code sample within a React component, like this:
React.createClass({
render: function() {
return (
<code> body { color: blue; } </code>
)
}
});
However, this does not seem to work.
Is there some special way for me to escape code like this, or am I doing something wrong?
#ColonelThirtyTwo's answer does the trick:
<code>{"body { color: blue; }"}</code>
It is probably also worth noting that this can be done with multiline strings too:
<code>{`
html { background: red; }
body { color: blue; }
`}</code>
If you want to do multiline you have to add line breaks as follows. If you don't they will all be on the same line.
<code>
{`html { background: red; }`}<br/>
{`body { color: blue; }`}<br/>
</code>
I'm having an issue with boostrap3 and it's default background: transparent !important; print setting.
I have the need to show a heatmap in my webapp and have these printable.
I'm using an ng-style directive for that to dynamically calculate the needed background-color.
In short, this is the html part
<div class="heatmap" ng-style="scalecolor(10)">lorem ipsum</div>
and this is the controller part
$scope.scalecolor = function(perc) {
return { backgroundColor: plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc) }
};
However, because bootstrap3 sets all backgrounds to transparent with the !important keyword, I can't print these.
This is the part of bootstrap 3.1.0 css causing the issue with missing background-color:
#media print {
* {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
box-shadow: none !important;
}
}
Since the inverse of background: transparent !important; is background: color hex code !important;
(see here )
I'm trying to set that using the ng-style, but then the exclamantion mark causes Angularjs to flip when I try this:
$scope.scalecolor = function(perc) {
return { backgroundColor: plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc) !important }
};
or alternatively when I try this in the html template
ng-style="scalecolor(10) !important"
Anyone out there that knows how I can use the !important css keyword with the Angularjs ng-style directive to override the bootstrap3 wildcard?
For those who want to see this with their own eyes, here's a plunker showing the issue
Apparently you can't and it's a known issue but there is some workaround that can be found here:
https://github.com/angular/angular.js/issues/5379
The solution below has been copied from the site just in case the link breaks, or get changed.
You're not able to use the !important directive in the DOM style property in either Chrome nor FF (probably others too). The style attribute gets parsed as CSS, but the HTMLElement.style property doesn't. Unfortunately you're not able to set a property's priority here (in Gecko/Blink/Webkit, at least).
So, there are some workarounds here:
Workaround #1
<ANY data-ng-attr-style="{{ blue && 'background-color: blue!important' || '' }}">
</ANY>
This would be your best way to go in terms of browser-support, because the CSS property priority will get parsed correctly here.
Workaround #2
Alternatively, you can also do the following in javascript:
$scope.$watch(conditionalStyle);
function conditionalStyle() {
if ($scope.blue) {
$element[0].style.setProprety('background-color', 'blue', 'important');
} else {
$element[0].style.backgroundColor = '';
}
}
Where $element is a jQuery/jqLite object referencing an HTMLElement.
Note: caveats are not supported in IE < 9 so workaround #1 is probably your best bet for this behavior where you depend on property priority...
Using the tips for #Wawy I updated my code to get it to work.
For anyone landing on this page, for clarification I made an updated Plunker that can be found here
In short, this is now the html part
<div class="heatmap" ng-attr-style="{{ngAttrScaleColor(10)}}">YES, ng-attr-style works !</div>
and this is the controller part
$scope.ngAttrScaleColor = function(perc) {
return 'background-color: ' + plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc) + '!important';
};