I want to give a custom CSS property to the specified range of the elements identified by number in id.
HTML:
<div id="game">
<div id="game-board-field-1-street-name"></div>
<div id="game-board-field-2-street-name"></div>
<div id="game-board-field-3-street-name"></div>
<div id="game-board-field-4-street-name"></div>
...
<div id="game-board-field-11-street-name"></div>
<div id="game-board-field-12-street-name"></div>
<div id="game-board-field-13-street-name"></div>
<div id="game-board-field-14-street-name"></div>
... too many ...
</div>
CSS:
#game div[id$=street-name] { /* I want this selector to get applied only to streets 1-4 */
font-size: 10px;
}
#game div[id$=street-name] { /* This one to streets 11-14 */
font-size: 14px;
}
Is there any ways to handle it only by CSS?
You can't select directly by their numbered IDs, as CSS doesn't provide dynamic attribute selectors.
However, if your structure is such that each numbered div corresponds to its position in the #game parent element, you may be able to use :nth-child() instead:
/* First 4 elements */
#game div:nth-child(-n+4) {
font-size: 10px;
}
/* Elements starting from the 11th and ending at the 14th */
#game div:nth-child(n+11):nth-child(-n+14) {
font-size: 10px;
}
Related
If I have a class like
.pin_12345_btn_select
Where the 12345 is a random number (which can be 5 to 12 characters long)
Is there a way I can set a single class style to all of these that are present in the site using a random number as above.
For example;
.pin_#####_btn_select {
Z-index:99;
width:220px;
}
Thanks
Greg
You can use attribute selectors providing the start and end text is always the same and only the random number changes.
[class^="pin_"][class$="_btn_select"]
The first selector choses any class that starts with the required text where the second selects classes that end with the chosen text. If we make them a single selector then.....
div {
padding: 1em;
margin: 1em auto;
background: red;
text-align: center;
}
[class^="pin_"][class$="_btn_select"] {
background: green;
}
[class$="_btn_select"] {
background: yellow;
}
<div class="pin_12345_btn_select">Should work</div>
<div class="12345_btn_select">Wont Work Fully</div>
<div class="pin_12345">Definitely won't work</div>
<div class="pin_random_btn_select">Should work</div>
I have three class : product1, product2, product3. I can add css to all these class as follows:
.product1, .product2, .product3{
// add css here
}
But I am looking for more cleaner code to track 1 to 3 followed by 'product' and add css to these. My expectation can be Pseudocode Examples:
.product1to3{
// fun with css.
}
Is there any approach in css?
There is no such kind of css pseudo on what you wanted to achieve.
You can try to use SASS to achieve what you wanted.
and then use the #for Directive
SASS
#for $i from 1 through 3 {
.product#{$i} { width: 20px; }
}
CSS
.product1 {
width: 20px;
}
.product2 {
width: 20px;
}
.product3 {
width: 20px;
}
Also you can try to use LESS
Hope this helps
pure css implementation JSfiddle
So basically you need an "Attribute Begins With Selector" i.e select all classes which start with "product" and then you can use nth child attribute to select range
div[class^="product"]:nth-child(n+4):nth-child(-n+5) {
background: red;
}
Really good article on complex css and nth:child
/* This selects all the elements which have the class name starting with
"product"
*/
[class ^= "product"] {
//CSS
}
If you have an unknown / high number of ".product(x)", and for whatever reason don't want to use an extra class to target them, you can get away with an attribute selector that matches all elements that have a class containing "product".
[class*="product"]
div{
border:2px solid tan;
height:40px;
}
[class*="product"]{
background:steelblue;
}
<div class="product1"> product 1 </div>
<div class="product2"> product 2 </div>
<div class="not"> not a product</div>
<div class="product3"> product 3 </div>
<div class="product4"> product 4 </div>
It occupies just 1 line of compiled CSS, so it's minimal footprint, but be careful how you apply it.
Not an answer for the OP but for others that may find their way here remember that you can use multiple classes for each element.
html
<div class="product product1"></div>
<div class="product product2"></div>
<div class="product product3"></div>
css
/* shared styling */
.product {
display: flex;
background-color: gray;
border: 1px solid red;
}
/* individual styling */
.product1 {
color: black;
}
.product2 {
color: white;
}
.product3 {
color: blue;
}
I am building a web site that is basically made out of sections + rows + columns and to each element you can apply a color scheme.
If the color scheme is applied to the section, all the rows and columns within it will have the same color scheme, however, sometimes I want to add a color scheme to a single column to differentiate it, but in some cases the parent section color scheme css is placed AFTER the color scheme css for the column (in the css file), and then it applies the colors for the section instead of the columns.
Here is the code (simplified for the sake of example).
I could get around it in specific cases, using !important, but I am looking for a global solution.
CSS:
/* Grey */
.color-scheme-grey button {
background-color: #666666;
color: #ffffff;
}
/* Blue */
.color-scheme-blue button {
background-color: blue;
color: #ffffff;
}
HTML:
<div class="section color-scheme-blue">
<div class="row">
<div class="column color-scheme-grey">
<button>I am blue, but I wish I was grey!</button>
</div>
</div>
</div>
Thanks!
This is expected behaviour as a direct result of Cascade Precedence.
If two rules carry the same weight or specificity the rule declared last always wins and over-qualifies the other.
Use more Specificity
Consider declaring another element or class selector in the range of the contextual selectors already specified.
Example:
Added element selector (div) for more specificity...
div.color-scheme-grey button { ... }
Added a class selector (.section) for more specificity...
.section .color-scheme-grey button { ... }
Code Snippet Demonstrations:
1. Additional Class Selector:
/* Grey */
.section .color-scheme-grey button {
background-color: #666666;
color: #ffffff;
}
/* Blue */
.color-scheme-blue button {
background-color: blue;
color: #ffffff;
}
<div class="section color-scheme-blue">
<div class="row">
<div class="column color-scheme-grey">
<button>I am blue, but I wish I was grey!</button>
</div>
</div>
</div>
2. Additional Element Selector:
/* Grey */
div.color-scheme-grey button {
background-color: #666666;
color: #ffffff;
}
/* Blue */
.color-scheme-blue button {
background-color: blue;
color: #ffffff;
}
<div class="section color-scheme-blue">
<div class="row">
<div class="column color-scheme-grey">
<button>I am blue, but I wish I was grey!</button>
</div>
</div>
</div>
For Further Information regarding CSS Specificity:
Specificity - CSS | MDN
Specifics on CSS Specificity | CSS Tricks
Apply your styles from the parent like below.
.section .color-scheme-grey button {
background-color: #666666;
color: #ffffff;
}
DEMO
You could increase the specificity of the rules to counteract the order of the files:
/* Grey */
.color-scheme-grey button {
background-color: #666666;
color: #ffffff;
}
/* Blue */
.color-scheme-blue button {
background-color: blue;
color: #ffffff;
}
.color-scheme-blue .color-scheme-grey button {
background-color: #666666;
}
You need to be careful with this, though, as it can very quickly get out of hand with all the combinations!
Better would be to organise a set of formatting that applies to rows/sections and, separately, columns, and organise them appropriately in a file (sections first).
I have a LESS mixin applied to a number of different classes. Its possible for one element with the mixin to be within another element which also have the mixin. When this is the case I dont want the child element to have the styling applied.
http://codepen.io/anon/pen/NPBWXM
.style1() {
padding: 10px;
border: 1px solid red;
}
.elm1 {
.style1;
}
.elm2 {
.style1;
}
<div class="elm1">Element 1</div>
<div class="elm2">
Element 2
<div class="elm1">Element 1</div>
</div>
No, it appears this is not possible.
What is the proper way to ignore 2 different .section elements, using nth type. this is what I have.
.section:not(:nth-of-type(1)),
.section:not(:nth-of-type(11)) {
max-width:900px;
margin:0 auto;
}
The problem with your selector is that it selects all .section elements which are not the first of type, and also the .section elements which are not the 11th of type. So you end up selecting all .section elements.
Instead, I think you want
.section:not(:nth-of-type(1)):not(:nth-of-type(11)) {
max-width:900px;
margin:0 auto;
}
That is, select the .section which are not the first of type nor the 11th of type.
.section:not(:nth-of-type(1)):not(:nth-of-type(11)){
background: red;
}
<div class="section">1</div>
<div class="section">2</div>
<div class="section">3</div>
<div class="section">4</div>
<div class="section">5</div>
<div class="section">6</div>
<div class="section">7</div>
<div class="section">8</div>
<div class="section">9</div>
<div class="section">10</div>
<div class="section">11</div>
<div class="section">12</div>
<div class="section">13</div>
<div class="section">14</div>
<div class="section">15</div>
I think the typical approach to this is to specify a CSS rule that affects everything and a more specific rule that affects these particular elements.
.section {
max-width: 900px;
margin: 0 auto;
}
.section:nth-of-type(10n + 1) {
max-width: auto;
margin: auto;
}
The .section:nth-of-type(10n + 1) will target not just the 1st and 11th items, but also the 21st, 31st, etc., items, anticipating the possibility of more items.