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
Suppose I have an HTML table that has been assigned to the class dependency_table.
How can I style the tr, th, and td children of that that specific table without having to put class="dependency_table" in all of the child tags?
Here is what I have tried so far:
/* --- DEPENDENCY TABLE STYLING --- */
.dependency_table {
border-collapse: collapse;
color: pink;
}
.dependency_table ~ td {
background: #FAFAFA;
text-align: center;
}
.dependency_table ~ th{
background: #DFDFDF; /* Darken header a bit */
font-weight: bold;
}
The general sibling selector hasn't worked for me yet with this syntax. What is the correct way of doing this?
If I understand correctly you want to do this:
/* --- DEPENDENCY TABLE STYLING --- */
.dependency_table {
border-collapse: collapse;
color: pink;
}
.dependency_table td {
#your style
}
.dependency_table th{
#your style
}
.dependency_table tr{
#your style
}
Another alternative to cover more tags at once:
.dependency_table td, .dependency_table tr, .dependency_table th{
#your style
}
Related
This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
Closed 4 years ago.
I found a simple way to show a thin border around a html table:
https://www.w3schools.com/css/css_table.asp
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
Now I want to apply this only to all tables with class "foo".
I tried this, but this does not work:
table.foo {
border-collapse: collapse;
}
table.foo, th, td {
border: 1px solid black;
}
This changes the style of all td tags. But I want only the td tags directly below a "foo" table.
What is the right way to do this?
Make CSS selection like...
table.foo, table.foo th, table.foo td {
....
Also here is a quick check for selectors.
https://www.w3schools.com/cssref/css_selectors.asp
Comma separator mean will apply style separately
Use:
table.foo td
Then will apply to all td under table with class foo
The space mean descendant of any level.
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 4 years ago.
Improve this question
How to use css to add multiple styles for a paragraph
For Ex: in my below css code,
p {
text-align: justify
}
p {
font-size: xx-small
}
p {
color: aqua
}
body {
font-family: Arial, Helvetica, sans-serif
}
h1,h2,h3,h4,h5,h6 {
text-align: right,
}
li {
text-align: center
}
Now as you can see i have for Paragraph the following styles kept
Justify
Small
Aqua Color
How can i combine all of them into the same tag rather than having it distributed in three sections
Thank you,
Just add them all in to the same declaration, like so
p {
text-align: justify;
font-size: xx-small;
color: aqua;
}
It is the semicolon ; that is missing in your code. Normally a CSS rule ends with a semicolon. Only after the last rule before a closing curly brace (}) you can omit the semicolon. After that you can remove the } and p { that are extra.
If i understood your question correctly you can write your styles like this ( see snippet below )
p {
text-align: justify;
color: aqua;
font-size: xx-small
}
<p>
Some text
</p>
p {
text-align: justify;
font-size: xx-small;
color: aqua;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
#menu1 a {
display: block;
background-color: #0066FF;
text-decoration: none;
font-family: calibri;
font-size: 20px;
color: #FFFFFF;
padding: 5px 5px;
}
#menu1 a:hover {
background-color: #0088FF;
}
#menu1 li {
display: inline-block;
}
#menu1 ul {
list-style: none;
text-align: center;
margin: 0 auto;
padding:0px;
}
Here's my code. I'm trying to get it all under one #menu1 Because i'm working with multiple menu's and i don't want to lose my overview. Does anybody know how to do this? Maybe something with positioning? My question is: How do i get the a, a:hover, li and ul properties under one #menu1?
Thanks for your help!
Update:
I've had a lot of answers that refer to LESS or SASS. I'm not familiar with those languages. Could anybody explain to me what this is and how to use this? A link to a clear tutorial is fine.
Presumably you want to do something like this:
#menu1 {
a { /* ... */ }
li { /* ... */ }
ul { /* ... */ }
}
This is not possible with CSS and there is no workaround to enable this type of structure; you have to write out each selector in full and rely on logical grouping and/or formatting in the source to provide structure.
You can, however, use a CSS preprocessor such as LESS or SASS which will allow you to write code like the above and translate it to your original "dumb" CSS version automatically.
I have a table with a bunch of items, say 20. Every other row has a specific background color and the items in the cell do as well.
I achieve this with the following piece of CSS:
#item_list tr:nth-child(even),
#item_list tr:nth-child(even) input[type="text"],
#item_list tr:nth-child(even) input[type="number"] {
background-color: #d4d4d4;
}
My question is whether there is a neater way to end up with the same styling? Specifically without the repetition of
#item_list tr:nth-child(even)
or not?
Not using CSS.
If you use a pre-processor such as SASS or LESS then you could get syntax like:
#item_list tr:nth-child(even) {
background-color: #d4d4d4;
input[type="text"],
input[type="number"] {
background-color: #d4d4d4;
}
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have two tables on my site, those are named:
<table class="table1">
<table class="table2">
I am trying to reference to table1's td, tr and th using:
table.table1 td, tr, th {
border: 1px solid red;
}
but it applied to both my tables and I can't overwrite the styling to table2. What went wrong?
The commas in between each selector means a new selector. So the tr and th selector are generic to all tables and not just table1. So you need to specify table1 for each of those selector .
table.table1 td, table.table1 tr, table.table1 th {
Do this:
table.table1 td, table.table1 tr, table.table1 th {
border: 1px solid red;
}
You must access tr, th through parents only if you want to apply particular style, every rule is separated by comma. You must reference the parent's class to apply style to tr, td childs
You applied css style to all tr, th from page.