This question already has answers here:
Is there a CSS selector by class prefix?
(4 answers)
Closed 4 years ago.
I have a class called .box-159 where the number changes every time the screen is refreshed. Is there a way to define this field (say background-color) in the CSS?
Yes it is possible just by using CSS only.
Option #1 - Match by prefix value
Use CSS Class selector ^="class" which select all elements whose class is prefixed by "box-"
[class^="box-"] {
background: red;
height: 100px;
width: 100px;
margin: 10px 0;
display:block
}
<div class="box-159"></div>
<span class="box-147"></span>
<article class="box-76878"></article>
Option #2 - Match by contains at least one value
Use another CSS class selector *="class" (equivalent to CSS attribute selector) which select all elements whose class contains at least one substring "box-".
[class*="box-"] {
background: red;
height: 100px;
width: 100px;
margin: 10px 0;
display:block
}
<div class="box-159"></div>
<span class="box-147"></span>
<article class="box-76878"></article>
You can add an additional class, like so, then both those elements will have the class' CSS attributes:
.box-class {
background-color: red;
width: 100px;
height: 100px;
margin-bottom: 20px;
}
<div class="box-class box-4"></div>
<div class="box-class box-159"></div>
Related
I wonder which selecter will be affecting my div and why?
HTML
<div class="div-1" class="div-2"></div>
CSS
.div-1 {
width: 200px;
height: 300px;
background-color: gray;
}
.div-2 {
width: 200px;
height: 300px;
background-color: blue;
}
Snippet
.div-1 {
width: 200px;
height: 300px;
background-color: gray;
}
.div-2 {
width: 200px;
height: 300px;
background-color: blue;
}
<div class="div-1" class="div-2"></div>
When parsing the start tag, the second class attribute will trigger a duplicate attribute parse error and be ignored.
if there is already an attribute on the token with the exact same name, then this is a duplicate-attribute parse error and the new attribute must be removed from the token.
Consequently only the first class attribute will be added so the only class that will apply to the div is div-1 and thus only the first ruleset will apply.
Note that you can apply multiple classes to a single element since the class attribute accepts a space-separated list of classes. In that case, the normal rules for the cascade will apply (with the properties of the second rule-set overriding the duplicate properties of the first because the selectors have equal specificity and so they are applied in order of appearance).
Is it possible create a custom class for example:
border {
border:1px solid;
}
and apply directly in a tag, without need of class=""?
Example: <div class="row" border></div>
Well, you can. But as #G-Cyrillus said in the comments to create a custom attribute in your HTML element it is better to use HTML data-attribute to stick with the HTML standards. Then you can style your element without adding a class attribute.
So if you don't want to add it as a data-attribute you can style it like this:
[border] {
width: 100px;
height: 100px;
border: 1px solid;
}
<div class="row" border></div>
And with the data-attribute (Which is the standard one) you can do the same:
div[data-border] {
width: 100px;
height: 100px;
border: 1px solid;
}
<div class="row" data-border></div>
What you want can be accomplished by using a javascript framework like VueJs or React.
I know, in VueJs it's called a prop that you pass to a child element. Whether or not the prop (border in your case) is passed down, the styling is applied or not.
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
nth-of-type vs nth-child
(7 answers)
CSS - How to select nth-child of form element?
(3 answers)
Closed 2 years ago.
I have a html form with the following text input fields. No class, no id, same type.
I need to style them in a different way.
Is it possible to target them by order using pure CSS?
Something like:
CSS (not working)
input[0] {
height: 100px;
}
input[1] {
height: 150px;
}
input[2] {
height: 200px;
}
<input name="arr[]" type="text">
<input name="arr[]" type="text">
<input name="arr[]" type="text">
I know that I could use :nth-child or :nth-of-type, but I wonder if there's another way to target those elements, like in my CSS example.
Thanks.
Try :nth-child, like this:
input:nth-child(1) {
height: 100px;
}
input:nth-child(2) {
height: 150px;
}
input:nth-child(3) {
height: 200px;
}
This question already has answers here:
Is there a reason why CSS doesn't support ids and classes, starting from numbers?
(8 answers)
Closed 8 years ago.
I have this html;
<div class="1"><br/>hi</div>
<div class="2"><br/>hi</div>
<div class="3"><br/>hi</div>
<div class="4"><br/>hi</div>
and then I added normal CSS formatting to the divs;
div{
height: 100px;
width: 100px;
border-radius: 100%;
margin: 20px;
display: inline-block;
text-align: center;
}
and then i wanted each div to be a different colour so I used the classes like this;
.1{
background-color: pink;
}
.2{
background-color: red;
}
.3{
background-color: orange;
}
.4{
background-color: yellow;
}
I am writing this in dreamweaver and when i click on the divs the little class thing tells me that they are coloured and the code is working, but when i preview in a browser the colours are not showing up and I just get the div part of the CSS.
it's probably very obvious but I can't think of why this is happening.
Thanks :)
Please avoid using classes with number at the beginning. It will fail for sure.
You can use for example cl1, cl2, cl3, etc.
This question already has answers here:
Why do the :before and :after pseudo-elements require a 'content' property?
(5 answers)
Closed 7 years ago.
I have a button and on a :hover I would like an after element to show. But I can't see it. Is it possible to have an :after element on a button?
.button {
cursor: pointer;
height: 30px;
}
.button-primary {
border: none;
}
.button-primary:hover:after {
display: block;
position: relative;
top: 3px;
right: 3px;
width: 100px;
height: 5px;
}
<button class="button button-primary">My button</button>
This should now work on all up to date browsers.
To get it to work, you need to add content:""; in your after.
Yes you can use it – as long as you as don't need to support some very old browsers, e.g. MS IE 7 or lower. I don't know of any other browser that doesn't understand pseudo elements on empty HTML tags. In fact I already used it in several production sites without any problems.