Currently, I have this selector:
.form .mid td p:last-child:not(:only-child) {
margin-bottom: 0;
}
It's not working as intended. I want to remove the margin ONLY if there are more than one P inside the TD
If your td contains more than just p elements (I can't tell because you haven't shown your markup), you probably want to use :last-of-type and :only-of-type instead:
.form .mid td p:last-of-type:not(:only-of-type) {
margin-bottom: 0;
}
Related
.upload header {...}
Styling will be applied to any header that is a child of any element with class of '.upload'.
Is it possible to do this?
.upload header, form {...}
Or will I have to specify the class for every type selector ?
You can't do that. The comma for selector works like the following:
div > nav,
p {
display: block;
}
Is exactly the same as writting
div > nav { display: block; }
p { display: block; }
The comma is used to re-use rules, but each selector is global, and does not use the same parent.
In your case, if you want to make the rule only apply to those form elements that are children of .upload, you would have to do
.upload header, .upload form {...}
You could do this with two selectors. First set your styles with * and then reset the same styles if you only want it to be applied to the first child element.
.upload *:first-child {
background: blue;
}
.upload *:first-child *:first-child {
background: none;
}
I've been trying to get rid of the top & right margin from this title. I have tried margin:0 & margin: none
and it hasn't worked. Any suggestions would be appreciated.
p.title {
font-family: 'Germania One';
font-style: normal;
color: #FFF;
font-size: 150px;
Position:absolute;
width:100%;
z-index:1000;
text-align:left;
margin-top: 300px;
margin-bottom: 0px;
margin-left:200px;
}
#media (min-width:320px) and (max-width:425px) {
p .title{
position:none; margin: 0 ;
}
The selector in your media query cannot override the selector preceding the media query because they are not the same. Change the selector inside your media query from p .title to p.title and it will work.
The (space combinator) in a CSS selector means the second part of the selector is a descendant of the first part, while chaining selectors without space it means the selector applies to the same element.
Therefore p.title selects any <p> tag with the class title, while p .title selects any element with the class title that is a descendant of a <p> element.
Here's the list of CSS combinators.
You made a typo:
#media (min-width:320px) and (max-width:425px) {
p.title{ /* No Space */
position:none; margin: 0 ;
}
}
You wrote p .title (with a space) instead of p.title inside the media query.
//Remove the space from p .title{} and put the media query like that-
#media (min-width:320px) and (max-width:425px) {
p.title{
position:none;
margin-top: 0;
margin-right: 0;
}
}
Is it possible using less to do a conditional? The logic I want is if a table > tr > td has an a tag, then apply padding: 20px on the a tag. If there is no a tag in the td, then apply the padding on the td itself.
What you are suggesting is not possible in CSS so LESS won't be able to do it either.
However, we can try to be clever:
table > tr > td {
padding-top: 20px;
}
table > tr > td a {
margin-top: -20px;
padding-top: 20px;
}
It looks weird and "hacky", but if i may, so does your request :)
With the following css I define the 1st col of the head of my table
table.search-transport tr th:nth-child(1) { width: 30px; text-align:right; }
I would like to apply this css not only on the head but also on the body of the table.
I know we can proceed in 2 lines:
table.search-transport tr th:nth-child(1),
table.search-transport tr td:nth-child(1)
{ width: 30px; text-align:right; }
But I would like to know if we can proceed in 1 signe line? Something like:
table.search-transport tr th:nth-child(1) + td:nth-child(1) { width: 30px; text-align:right; }
Thanks.
As long as it's any cell in the first column? You should be able to simply omit the th/td part altogether, as well as making use of the child selector since a tr can only have either a th or a td as a child (and you want to ensure you only select its child and not any inner elements):
table.search-transport tr > :nth-child(1) { width: 30px; text-align: right; }
(If you want to support older browsers replace :nth-child(1) with :first-child.)
Generally speaking, though, you can't choose both th:nth-child(1) and td:nth-child(1) separately while avoiding duplicating the rest of the selector. This has been covered to death elsewhere on the site already, but see here for a little extra info.
I guess you are looking for the :any pseudoclass. See https://developer.mozilla.org/en-US/docs/CSS/:any.
table.search-transport tr :any(th,td):nth-child(1) { width: 30px; text-align:right; }
Note: you'll need to vendor prefix this. Untested.
The CSS selector which you are using currently is poor in terms of performance.
Following line answers your question.
.search-transport tr > :nth-child(1) { width: 30px; text-align: right; }
Check the fiddle to see selector in action http://jsfiddle.net/LNJLf/
Lets say I have in my CSS a color definitions:
.headerColor { background-color: #a6c9e2; }
Now I would also like to define a CSS definition that uses .headerColor:
.header { padding-left: 2px; }
On the CSS level, how can I inherit .header from .headerColor?
I know I can place the two styles on the HTML element (class='header headerColor'), but how can I assign .header to my HTML element and have it pull its parent styles?
You can write like this:
.headerColor, .header { background-color: #a6c9e2; }
.header { padding-left: 2px; }
Now, you just need to set class="header" in HTML.