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>
Related
I'm looking for a way to select an element with two times the same class on a webpage I don't own, so I have no ability to modify its markup.
I would expect that
.abc.abc{background:blue}
only impacts div with class abc abc but in fact is also impacts div with single abc class.
div[class*=abc abc]{background:blue} has the same issue.
.abc{
width:100px;
height:100px;
background:green;
margin:5px;
}
.abc.abc{
background:blue;
}
<div class='abc'></div>
<div class='abc'></div>
<div class='abc abc'></div>
Is there a selector so I can apply rule to div with class abc abc without affecting div with single class abc ?
You just need a more specific target :)
.abc{
width: 100px;
height: 100px;
background: green;
margin: 5px;
}
div[class*="abc abc"] {
background: blue;
}
<div class='abc'></div>
<div class='abc'></div>
<div class='abc abc'></div>
View CodePen Solution
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 trying to create a div, that is created by adding multiple classes.
For a particulair reason, the width, height and size will not set. Instead they are the auto-size. When I add everything to one class, the size and such work, but as stated earlier when seperated, they will not do anything.
How I created the multiclass div (tried shuffeling the classes aswell)
<div class="box pos1 1x1">
<p class="verdana"> ... </p>
</div>
Inside the CSS file:
.pos1{
display: inline; float:left;
}
.1x1 {
width:13.5vw;
height:13.5vw;
}
.1x2 {
width:13.5vw;
height:17.5vw;
}
.2x2 {
width:17.5vw;
height:17.5vw;
}
div.box{
background-color:#000000; color: white;
margin-left:0.25vw; margin-top:0px; margin-right:0.25vw; margin-bottom:0px;
border: white solid 2px;
}
Also creating one big class is not an option.
Thank you.
Class names starting with numbers are not valid! Your class name have to start with _, - or a letter (a-z)!
The pattern to validate a class name: -?[_a-zA-Z]+[_a-zA-Z0-9-]*
https://www.w3.org/TR/CSS21/grammar.html#scanner
See the following solution:
.pos1{
display:inline;
float:left;
}
.size1x1 {
width:13.5vw;
height:13.5vw;
}
.size1x2 {
width:13.5vw;
height:17.5vw;
}
.size2x2 {
width:17.5vw;
height:17.5vw;
}
div.box{
background-color:#000;
color:#fff;
margin:0 0.25vw;
border:2px solid #fff;
}
<div class="box pos1 size1x1">
<p class="verdana"> ... </p>
</div>
As other mentioned class name cannot start with numbers, and in pos1 you make the div to display as inline. Inline element does not have height, should use inline-block.
When writing css using BEM if you need to make changes to a module element when it is in a sub-module do you nest the module-element in the sub-module or create a new class name for the module-element?
Creating a New Class
Creating a new class name(i.e. module--modifier__element) seems to be more in the spirit of BEM. It prevents unnecessary specificity. But it also adds a lot of extra work adding an extra class to each element within the module.
Nesting
Nesting the existing element class within the module modifier(i.e. module--modifier module__element {} will add some extra specificity but saves you a lot of work(at least for large modules) and makes the markup easier to maintain. For example if you needed to change the modifier of a module you would only have to change it one place in the markup rather than having to change it on every child element.
In addition to that if not all of the child elements change then you will have to refer to the css to figure out which child elements need a class added to them.
EXAMPLE CODE
.module {
display: block;
width: 90%;
height: 2rem;
margin: 2rem auto;
padding: 0.5em;
background: #fff;
border: 2px solid #333;
}
.module--modified1 {
background: #333;
border: none;
}
.module--modified2 {
background: #baa;
border: 3px solid #8f8;
}
.module__element {
color: #333;
text-align: center;
}
/* Option 1 */
/* In sass this would actually be nested within the module_modified1 block */
.module--modified1 .module__element {
color: #fff;
}
/* Option 2 */
.module--modified2__element {
color: #fff;
font-size: 1.3em;
}
<div class="module">
<div class="module__element">Module</div>
</div>
<div class="module module--modified1">
<div class="module__element">Module Modifier 1</div>
</div>
<div class="module module--modified2">
<div class="module__element module--modified2__element">Modulue Modifier 2</div>
</div>
Both options are valid. Reduce the specificity is a good practice, but make the code simple is also a good practice.
However, BEM blocks have to be context-free. If a block can be recursively included into itself, then cascades must be avoided. For example, a generic block fun-rounded-block could be recursively reused like this:
<div class="fun-rounded-block fun-rounded-block--blue-version">
<div class="fun-rounded-block__content">
<div class="some-block-here">
<div class="fun-rounded-block">
<p class="fun-rounded-block__content">element in the sub-block here</p>
</div>
</div>
</div>
</div>
In this example, you cannot use a cascade for styling elements because the selector .fun-rounded-block--blue-version .fun-rounded-block__content would interfere with the sub-block.
I am playing around with a site that has an image of a 600px by 600px grid of 9 squares in its own div. I wanted to be able to highlight each grid square on hover and I have succeeded, but I would like to know if my code could be more compact.
for instance my highlight behavior never changes, but the way I am coding it I would need to code 9 of them for each square, how can I just have one and apply it to all the grid squares?
here is the code.
#theGrid
{
margin-left: auto;
margin-right: auto;
width: 600px;
height:600px;
background-image:url("img/grid.png");
}
#square1
{
top:7px;
left:7px;
width:200px;
height:200px;
background-color:transparent;
}
#square1:hover
{
background-color: yellow;
opacity:0.2;
filter: alpha(opacity=20);
}
Thanks all.
It doesn't matter weather you use class or id or not on your solution but there is a proper way in the long run. What matters is that you can use the same style name on each square. So, it would be square and not square1, 2, 3, ect... We use class for an object that is repeated on the same page multiple time and id for an object that happens one time.
Is is a quick reference I found: http://www.htmldog.com/guides/css/intermediate/classid/
here is the code that I would start using.
You will need to use float and then use a clear:both when you are on a new row.
<div id="outterWrapper">
<div id="theGrid">
<div class="square"></div><div class="square"></div><div class="square"></div>
<div class="clear"></div>
<div class="square"></div><div class="square"></div><div class="square"></div>
<div class="clear"></div>
<div class="square"></div><div class="square"></div><div class="square"></div>
</div><!-- END THE GRID -->
</div><!-- END OUTTER WRAPPER -->
#theGrid{
margin-left: auto;
margin-right: auto;
width: 600px;
height:600px;
background-image:url("img/grid.png");
}
/*Here we use class to reference all the squares*/
.square {
margin: 7px 0 0 7px; /* play with your positioning here. Can also use padding*/
width:200px;
height:200px;
background-color:transparent;
float:left; /*This will make all the boxes move next to each other*/
}
.square:hover {
background-color: yellow;
opacity:0.2;
filter: alpha(opacity=20);
}
.clear {
clear:both;
}
Instead of using # for both #square1 & #square1:hover, you could use .square1 & .square1:hover.
The # character is used for IDs ( ie. <span id="square1"></span> )
The . character is used for classes ( ie. <span class="square1"></span> )
Then apply the class ".square" to each of the nine squares. Any square with the .square class will have that style applied to it. Same goes for the hover.
Otherwise, if that doesn't work for you... you could do it in javascript by added a onmouseover and onmouseout events to each square. Then have javascript functions that handle applying the styles dynamically from code.
For example:
<div id="square1" onmouseover="handleMouseOver('square1')" onmouseout="handleMouseOut('square1')"></div>
<script>
function handleMouseOver(sq)
{
// set style
}
function handleMouseOut(sq)
{
// set style
}
</script>
You could use class instead of id
Oh, sorry I misunderstood what you want, you can just do like this
#square1:hover, #square2:hover, #square3:hover.......
{
background: yellow;
}