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;
}
Related
This question already has answers here:
What’s the point of the ::before and ::after pseudo-element selectors in CSS?
(5 answers)
How to style a checkbox using CSS
(43 answers)
Closed 10 months ago.
The company I work for has an in-house extension of bootstrap classes. I'm having difficulty using the checkbox they provide, so I have to dive into their code. I'm starting with this HTML snippet:
<div class="checkbox XXXbs-checkbox">
<label for="checkbox-id">Some Text</label>
<input class="form-control" id="checkbox-id" name="checkbox-name" role="checkbox" type="checkbox" value="y">
</div>
Their checkbox css contains this ("XXX" is in place of a string that would identify the company I work for):
.XXXbs-checkbox input[type=checkbox] {
opacity: 0;
margin-left: 4px;
cursor: pointer;
z-index: 1;
width: 100%;
}
Opacity is 0, making the actual checkbox from the above HTML invisible. Meanwhile, they also have this:
.XXXbs-checkbox>label::before {
font-family: XXX-icon;
content: "\e903";
font-size: 32px;
position: absolute;
top: -15px;
left: 0;
}
to place an empty checkbox before the label, and this:
.XXXbs-checkbox>input[type=checkbox]:checked+label::before {
content: "\e904";
color: #000
}
to render a box with a check mark in it.
My question is, why would you use this approach? Why would you draw a fake checkbox in front of the label instead of just styling the actual checkbox?
Why would you draw a fake checkbox in front of the label instead of just styling the actual checkbox?
Because the amount of styling you can apply to a checkbox itself is very, very limited.
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>
This question already has answers here:
CSS3's attr() doesn't work in major browsers
(5 answers)
Closed 7 years ago.
How can I use attr() to select the data attribute and set various CSS properties based off the value? For example I have this jsfiddle http://jsfiddle.net/rh1vfmso/ - I set the width via data-width then try to set it via width: attr(data-width);
It works when I set the content as the attribute but nothing else. How would I be able to set the width based off what's set in the attribute in HTML?
<style type='text/css'>
input[type='checkbox']:checked ~ .size:before {
content: attr(data-width);
display: block;
height: 30px;
background-color: red;
width: attr(data-width);
/*width: 100px;*/
}
</style>
<div>
<input type='checkbox' id='resize'>
<label for='resize'>Resize</label>
<div class="size" data-width=100px></div>
</div>
Support would depend on the given browser's implementation. If it's not working, then it's not currently supported.
According to MDN, support for properties other than content is experimental:
The attr() function can be used with any CSS property, but support for properties other than content is experimental.
This question already has answers here:
How do I prevent CSS inheritance?
(13 answers)
Closed 6 years ago.
Width in in parent table is automatically inherited to child table.
HTML
<table class="datagrid">
<tr><td>sdfdsfds</td></tr>
<tr><td>
<table class="gridpager">
<tr><td>1</td></tr><tr><td>1</td></tr>
</table>
</td></tr>
</table>
CSS
.datagrid table {
width: 100%;
}
.gridpager table {
float: right;
}
If i add width:auto in gridpager class it will works.but need to override all style of parent in child class.Is there any other solution other than this?
Make the css changes like following
table.datagrid {
width: 100%;
}
table.gridpager {
float: right;
}
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.