Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I have a simple HTML table and I want to style one of the columns which I do with the following CSS.
.tableStyles tr td:first-child + td + td {
background-color:aquamarine
}
I would like to omit the first row from this so no styling is applied. I tried something like this but it doesnt work.
.tableStyles tr:not(first-child) td:first-child + td + td {
background-color:aquamarine
}
Can you help?
For skipping the 1st element of a given type and styling the 2nd, 3rd and 4th elements etc, using
:nth-of-type(n+2)
is an efficient solution.
Consequently, try:
.tableStyles tr:nth-of-type(n+2) td:nth-of-type(3) {
background-color:aquamarine
}
:nth-child(n+2) will select starting from the 2nd
.tableStyles tr:nth-child(n+2)
{
background-color:aquamarine
}
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I need to hide the second child of a div (#parentDiv) irrespective of the html-tag p, h2, h3 or div.
I could write all possible combinations in CSS, but it seemed to be clumsy as the html-tag of the element here can vary and is unpredictable. So I suppose writing up all HTML-tags is not a good approach.
Hence I tried below generalized approach in CSS, but did not work.
#parentDiv *:nth-child(2) {
display: none;
}
I do not need a JavaScript solution.
The code looks good and fine.. Check for brackets. You may have forgot to close brackets.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I'm trying to indent some data in a table.
The class I'm using currently is:
.table tbody tr.table-indent{
padding-left:50px solid #bdbdbd;
}
It doesn't seem to be working with padding, margins, or a border. How can I do this correctly?
There are several problems here:
Your code has some syntaxt errors. It should be something like that:
.table tbody tr.table-indent{
padding-left:50px;
}
if you want a border on your row too:
.table tbody tr.table-indent{
padding-left:50px
border: 1px solid #bdbdbd;
}
You should really add padding on a table cell instead of a row:
.table tbody tr.table-indent td:first-child{
padding-left:50px
}
The :first-child selector will catch just the first cell of each row.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Why does this doesn't work?
*:hover {margin-left:50px;}
Cause when I move over the element nothing happened.
Are you putting it at the end of your CSS file? If not, it may be getting overwritten.
*:hover {
margin-left: 50px;
}
is working for me.
What browser are you testing on?
Try the code below
body *:hover {margin-left:50px;}
try
body :hover{
margin-left: 50px;
}
this will apply the :hover to every inner element in body
I've just tested on Chrome and seems to work
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
Have the following CSS/SCSS for my labels, however, the label.req:before is not applying the color attr. Does anyone know if it is possible modify the color of the content I'm inserting?
label {
display:block;
font-size: $tiny;
}
label.req:before {
content: "*";
color:$red!important;
}
label:after {
content: ": ";
}
Thanks,
Mark
It is definitely possible to modify the color of the content you are inserting. Your issue is most likely with the variable or the quotes surrounding it. (check if you need those quotes)
As of a month or so ago you can check out pseudo-elements in the chrome web inspector. Take a look at your source code using it and you should be able to fix this in a second
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I have the following
HTML:
<h1 class="largeTitle">Exikle</h1>
CSS:
h1.largetitle {
font-size: 9ee;
color: #2B547E;
}
However the color does not get implemented. I believe the code is correct so I'm not really sure what the problem is.
Wrong class and attribute
Class name are casesensitive and font-size is em not ee
Try
h1.largeTitle {
font-size: 9em;
color: #2B547E;
}
CSS is case sensitive with selectors(IDs & Classes) so h1.largetitle should be h1.largeTitle.