I need to have 3 classes as follow:
.class-4, .class-5, .class-6 {
color: pink;
}
And it works perfectly.
Let's say I need the same but for 100:
.class-4, .class-5, .... .class-100 {
color: pink;
}
Is there anything similar to this or any other way to do this which I can use.
.class->3<101 {
color: pink;
}
To get the same result without writing 97 times the class and the comma?
There is nothing in pure CSS which will do this, but you could use JavaScript to create a stylesheet for you which has all that tedious repetition created automatically.
In this snippet you say what the ends of the class ranges are and what styling is to be put in each of the ranges.
If there is a range which you don't want to alter then you still need to include it but make its styles string just an empty string.
The snippet runs through each of the ranges creating the relevant style sheet entries and puts them in a style element in the head element of the document.
A few fairly random divs are shown here just to test that we are hitting the right ranges.
const rangeEnds = [4, 20, 35, 41, 48, 100];
const styles = ['color: pink;', 'color: red; background-color: black;', 'color: green;', 'color: yellow;', 'color: blue;', 'color: black; background: pink;'];
let lastRangeEnd = 0;
const styleEl = document.createElement('style');
for (let i = 0; i < rangeEnds.length; i++) {
for (let j = lastRangeEnd + 1; j < rangeEnds[i]; j++) {
styleEl.innerHTML += '.class-' + j + ',';
}
styleEl.innerHTML += '.class-' + rangeEnds[i] + '{' + styles[i] + '}';
lastRangeEnd = rangeEnds[i];
}
document.querySelector('head').append(styleEl);
<!doctype html>
<html>
<head>
<title>Classes</title>
</head>
<body>
<div class="class-1">ABCD</div>
<div class="class-19">ABCD</div>
<div class="class-21">ABCD</div>
<div class="class-40">ABCD</div>
<div class="class-41">ABCD</div>
<div class="class-48">ABCD</div>
<div class="class-100">ABCD</div>
</body>
If all elements will have the same property which is {color:pink}
You can create only one class (lets call it .pink)
.pink {
color: pink;
}
and then you can simply give your elements the .pink class.
One of class attribute's main purpose is to define a shared style reference name. It is rather not a very good practice to want to reference multiple class references and let them share the same styling.
The best way to get around this is to have a common class attribute name YourClassName. This way, any element you want the styling applied to can have that class appended to its class attribute through element.classList.add(YourClassName) with JS. And, that would solve all the hussle of having to worry about putting multiple classe names and I cannot think of any 1 situation that would force you to declare each element class separated by commas provided that they are to receive the same styling.
The OP asks if it’s possible to have a ‘number range’ (array) at the end of CSS classes that shares the same name, but ending on 1, 2, 3, etc.
As #zer00ne pointed out; You can target multiple classes with one "class". When defining your class selector - leave out the numbers, but make the class name unique.
So, if the class names are i.e. my-row-class-1, my-row-class-2, etc., write the selector like this;
[class^="my-row-class-"] {
color: pink;
}
Pro tip: Instead of using class^= selector, it's possible to do this for id^= as well - and more. Check out the MDN web docs for more info.
Related
I am using a complex object whose values are represented with Blazor. Among others there is a list of strings. Some strings contain a bullet, but these are represented as rectangles.
How can I manipulate the display so that the bullets are displayed?
My string:
razor file:
#for (int i = 0; i < #item.Highlight.Count() && i < 5; i++)
{
<div class="searchHighlight">#((MarkupString)#item.Highlight[i])</div>
}
The bulled at the html page:
You could replace • with the HTML equivalent •
#for (int i = 0; i < #item.Highlight.Count() && i < 5; i++)
{
<div class="searchHighlight">#((MarkupString)#item.Highlight[i].Replace("•", "•"))</div>
}
Then casting it as MarkupString should render it properly.
I've tried to imitate the same string data as you have, and, unfortunately, I could not reproduce this issue. It is pretty hard to tell where is the problem: CSS, fonts, metatags, string itself or something else. Anyways, according to the positive reaction to Waragi's suggestion, you could try some of these options:
Try to put bullet point HTML Unicode outside of your razor parentheses, like this:
<div class="searchHighlight">•#((MarkupString)item?.Highlight.Replace("•", ""))</div>
Also, you can avoid adding a bullet point HTML Unicode above by adding some styles to searchHighlight:
<div class="searchHighlight">#item?.Highlight.Replace("•", "")</div>
<style>
.searchHighlight::before {
content: "\2022";
}
</style>
I hope it helps!
So I'm trying to insert rows and columns into a table using the code below:
add_to_table(type) {
switch (type) {
case "row":
let columns = this.$refs.table.rows[0].cells.length;
let row = this.$refs.table.insertRow(-1);
row.height = "20px";
for (let i = 0; i < columns; i++) {
let cell = row.insertCell(-1);
cell.innerHTML = " ";
}
break;
case "column":
for (let row of this.$refs.table.rows) {
let cell = row.insertCell(-1);
cell.innerHTML = " ";
}
break;
}
}
However, this doesn't seem to maintain the css (doesn't add the data-* stuff to it).
I'm currently working around this by using v-for:
<tr v-for="row in rows">
<td v-for="column in columns">
</td>
</tr>
https://codesandbox.io/s/8n728r5wr8
Your created rows and columns are not getting styled because the <style> you declared is scoped.
For the elements to get the scoped style, they must have a data-v-SOMETHING attribute. The elements you create manually, not via Vue, don't have that attribute.
WARNING: Vue is data-driven, the correct, simplest, more predictable
and maintainable way of achieving what you want is mutating a data
attribute and letting Vue's templates react to it accordingly (using
directives like v-for). Your solution is not optimal. You have been warned.
That being said, you have some options:
Declare an additional <style> (non-scoped) tag along the scoped one. The created elements will pick up these styles. Drawback: the styles will be global. Advantage: you don't depend on Vue internals, you don't have to always add the data-v attribute (see below).
Example:
<style scoped>
...
</style>
<style>
/* EXAMPLE OF GLOBAL STYLE ALONGSIDE A SCOPED ONE */
tr, td {
box-shadow:inset 0px 0px 0px 1px orange;
}
</style>
Get a hold of the data-v-SOMETHING attribute. It is available at this.$options._scopeId. Double Warning: the prefix _ means it is internal code. It may change without notice. Your app may be forever stuck with the current Vue 2.x versions. You have been warned again.
So, whenever you create elements, just add the attribute. Example:
// row example
let row = this.$refs.table.insertRow(-1);
row.setAttribute(this.$options._scopeId, ""); // <== this adds the data-v-XYZ attr
...
// cell example
let cell = row.insertCell(-1);
cell.setAttribute(this.$options._scopeId, ""); // <== this adds the data-v-XYZ attr
Here's a CodeSandbox demo containing examples for both alternatives.
Note:
I'm new to web development and object oriented programming. I am brand new to SCSS and haven't yet grasped a solid understanding of the syntax. I have a basic understanding of how to use functions in SCSS.
Let me start off by defining the result I want to achieve.
_body.scss
body {
background-color: red;
}
Now I know if I wanted to obtain this result in Javascript I could:
Option 1: write a string of HTML code and replace the existing html tag.
Not going to code this, as this is a messy way of writing Javascript, but essentially using document.write() method.
Option 2: use the "setAttribute()" method
// assuming <head> and <body> are the only tags within <html>
var bodyTag = document.firstElementChild.lastElementChild;
bodyTag.setAttribute( "bgcolor", "red" );
I know there are additional ways to do this in Javascript, but for this example, I will focus on these two.
So I want to create a SCSS function that can return both the attribute and the value.
_body.scss ( Pseudocode string example )
#function makeAttribute( $attribute, $value )
{
#return $attribute + ":" + $value + ";";
}
body {
makeAttribute( background-color, red );
}
I have yet to find a built in function that addresses this ( similar to the "setAttribute()" method in Javascript ), or the string example above.
I know that functions can take: number, string, bool, color, list, map or null; but what I don't know is if an attribute fits into any of these value types ( for instance: string ).
I feel as if the article: Bringing Configuration Objects To Sass may be explaining what I am trying to do, but I'm having difficulty understanding this article ( so it may not be an explanation to a solution ).
My end goal is to create a function that would write the following css. I did not mention the browser support previously as it adds another layer of complexity that may or may not be easily explained.
body {
background-color: red;
-o-background-color: red;
-ms-background-color: red;
-moz-background-color: red;
-webkit-background-color: red;
}
i don't know if this have to be a function, i found it more logic use a mixin instead:
// Option 1
#mixin makeRule($value: red, $property: background-color) {
#{$property}: $value;
}
// Option 2:
#mixin makeRuleWithPrefixes($value: red, $property: background-color) {
#{-ms- + $property}: $value;
#{-o- + $property}: $value;
#{-moz- + $property}: $value;
#{-webkit- + $property}: $value;
#{$property}: $value;
}
/////////
body {
#include makeRule;
}
article {
#include makeRule(black);
}
p {
#include makeRule(2px solid blue, border)
}
span {
#include makeRuleWithPrefixes;
}
i changed the name, because is no right say - makeAttribute, when you are creating a cssRule ( selector + property name + property value ), well this is up to you ;)
ok the first,you need interpolation to use a variable as a property name.
The value is the first argument, so now you can use the default property, and just pass different values ( like the article :) )
or you can now set all the properties you want it, just pass the property as the second value ( like p )
body {
background-color: red;
}
article {
background-color: black;
}
p {
border: 2px solid blue;
}
span {
-ms-background-color: red;
-o-background-color: red;
-moz-background-color: red;
-webkit-background-color: red;
background-color: red;
}
I made the option two, because you ask it but i warn you, this is not a good approach. You could use a build tool ( webpack, gulp, grunt.. whatever ) than use a autoprefixer package that do this prefix automatically, this way is a pain because you have to be updating the #mixin eventually.
I have a variable that contains a string value in the form of some percentage eg. '10%' I want to use that value to build a class name to add to my html element if the percentage is anything above '0%'. I thought this would be easy using a sass loop but I can't seem to get the class name constructed correctly.
I thought it would look something like this.
#for $i from 1 through 100{
.highlight-#{$i}% {
// styling
}
}
.highlight-0% {
// styling
}
I have tried several variations:
.highlight-#{$i + '%'} { // styling }
.highlight-#{$i}${'%'} { // styling }
I don't know if this is even possible since '%' may be reserved.
I am adding the html just in case someone can suggest a way to remove the % in there. This is what I would like to be able to do:
<tr><td class="pad-10 highlight-${publisher.numViewsPercentage}" align="center">${publisher.numViewsPercentage}</td></tr>
Not only is % a reserved character in Sass, the bigger issue is it's not an allowed character in CSS selector names. So even if you could make Sass compile the resulting class names won't be valid and won't work.
For the most part selector names need to use only letters, numbers, underscore and hyphens.
.nopercent {
color: red;
}
.percent% {
color: red;
}
<div class="nopercent">
An element withOUT a percent sign in the class.
</div>
<div class="percent%">
An element with a percent sign in the class.
</div>
% is a placeholder character in SASS since version 3.2.
You should just use it for "invisible" extendeds.
I'm looking for a (CSS-)way to apply the hover state to a part of my HTML text when another part is hovered over, the two parts sharing the same CSS class.
I have a bunch of text in HTML, divided into words. Each word is linked to a CSS class; two different words can be linked to the same class.
By example, if I take three words and two classes (classA, classB),
word1, word3 -> classA
word2 -> classB
I will write the following HTML code :
<span class=classA>word1</span>
<span class=classB>word2</span>
<span class=classA>word3</span>
My problem : I want to change the appearance of a group of words sharing the same class on mouse over.
I tried :
.classA {
color: red;
}
.classA:hover {
color: blue;
}
... but when the mouse goes over "word1", "word1" is highlighted, but not "word3" which shares the same class ("classA").
Any help would be appreciated !
The short answer is NO, you cannot do that with CSS only except if you go for the solutions I've shared with you below.
Use the adjacent selector to apply the :hover effect at the same time
.classA:hover + .classB + .classA {
color: blue;
}
Demo
But unfortunately this will only work if you :hover the first group element, as you cannot go back with CSS, the second way to do is use a wrapper element but again, this will be limited if you are having only 2 combination of classes where you want to apply styles to a single type of class.
.wrapper_class:hover .classA {
color: blue;
}
Demo 2
.classA:hover {
color: blue;
}
This code applies only to elements that have class=classA AND are under the mouse..
I think it would be simpler to use Javascript:
var span = document.getElementsByClassName('classA');
var i = 0;
while(i < span.length){
span[i].onmouseover = function change(){
var i = 0;
while(i < span.length){
span[i].style.color = 'blue';
i++;
}
}
span[i].onmouseout = function change(){
var i = 0;
while(i < span.length){
span[i].style.color = 'red';
i++;
}
}
i++;
}
http://jsfiddle.net/fa7d0/Bt8eN/1/