The only class that I am allowed to use is .servicebox
I've tried this:
.servicebox div > div > div:last-child{
padding: 0;
}
but it is selecting more div, not the last one.
Use :last-child on the second div
.servicebox div > div:last-child > div{
padding: 0;
}
How about by id:
#c951 { /*your css*/ }
I beleive
div.servicebox > div > div > div.csc-default
should work if your last div that your are interested has a unique class. If not then:
div.servicebox > div > div > div#c951
should work.
Related
I have a problem with the following css approach.
.element:hover > div > span {
color: #FF0000;
}
On the other hand the following is working
.element:hover div > span {
color: #FF0000;
}
Why is it invalid to use the upper one and is there a workaround for it?
This question already has answers here:
Can a CSS class inherit one or more other classes?
(29 answers)
Closed 6 years ago.
I'm trying to address all the div, table, ul, dl, etc. children of a selector using LESS.
I would love to write something like this.
.myclass {
...
&.otherClass > (div, ul, dl, table) {
// define some rules...
}
}
I would expect the following output.
.myclass.otherClass > div,
.myclass.otherClass > ul,
.myclass.otherClass > dl,
.myclass.otherClass > table {
// rules
}
But the parenthesis seems like not supported, as it compiles as is, resulting an invalid CSS of course.
Is there any syntax or other way to have such a shortcut in definitions?
Your solution:
.myclass {
...
&.otherClass {
> div, > ul, > dl, > table {
// define some rules...
}
}
}
As for your comment, removing the > selector after the first selector, will produce a different result:
This example
div {
> span, p, a {
border:1px solid #333;
}
}
compiles into
div > span, div p, div a {
border: 1px solid #333;
}
while this example
div {
> span, > p, > a {
border:1px solid #333;
}
}
compiles into
div > span, div > p, div > a {
border: 1px solid #333;
}
Another solution similar to randy's answer is use a variable for .otherClass and >:
#selector: .otherClass >;
.myclass {
display:block;
&#{selector} {
div, ul, dl, table {
color:red
}
}
}
I have a div inside which there can be any tags.
For example p, span, h1, h4...etc
Few tags like p and h1 have default margins.
I want to write CSS which says
Select the first immediate child of div
For example if the div contained only p tags, I could've written something like -
div > p:first-child {
margin-top: 0;
}
But here the case is that instead of p, it can be anything. How can I do it?
Select the first immediate child of div.
Both of these will work.
div > :first-child {
margin-top: 0;
}
or
div > *:first-child {
margin-top: 0;
}
div > :first-child {
margin-top: 0;
}
Hope it will work for you !
I have the following markup:
<div class="ctr-1">
<h3>Title</h3>
<div class="ctr-2">
<h3>Title</h3>
</div>
</div>
And the following CSS
.ctr-1 h3:first-child{ display:none; }
Both <h3> tags are hidden, I only want the first one hidden. How?
This is what the first-of-type and nth-of-type selectors are for.
For example:
.ctr-1 h3:first-of-type { display:none; }
/* - Or - */
.ctr-1 h3:nth-of-type(0) { display:none; }
This would hide the first h3 descendant of .ctr-1, regardless of its location inside the parent element.
Granted, in your specific example, the h3 is indeed also the immediate (>) and first (:first-child) descendant of .ctr-1 . But if this is a coincidence, you might not be able rely on it. In that case, nth-of-type is the way to go.
You have a few different options:
Use the :first-of-type pseudo class to select the first element of type:
.ctr-1 > h3:first-of-type {
display: none;
}
Or use the :nth-of-type(n) pseudo class and specify the index of the first element:
.ctr-1 > h3:nth-of-type(0) {
display: none;
}
If type doesn't matter, and you always want to select the first child, use the :first-child pseudo class:
.ctr-1 > h3:first-child {
display: none;
}
They are both technically the first-child.
In your example, you could do:
.ctr-1 > h3:first-child { display:none; }
You have wrong, ctr doesn't exist, and you need to tell with > to select the first element level in your page selector try this:
.ctr-1 > h3:first-child{ display:none; }
You can use:
.ctr-1 > h3 { display: none; }
Can someone shed some light on this issue? The expected result does NOT appear to be happening... Am I correct in my assumptions?
.float-right{
float:right;
}
.header{
(stuff we don't care about)
}
.header img .float-right {
display:inline;
margin:0 0 0 0.5em;
}
I THOUGHT that would mean that a < img > tag inside a < div class="header" > would get:
float:right;
display:inline;
margin:0 0 0 0.5em;
IF the < img > tag was class="float-right"
Is this correct?
To get the result that you want, it should be
.header img.float-right
(no space)
No. .header img .float-right means any tag with the float-right class that is a descendant of an img tag which is in turn the descendant of a tag with the header class.
IF the < img > tag was class="float-right"
To acheive that there should be no space
.header img.float-right {
As it is now, it's looking for
[an element with class "float-right"] [inside an img] [inside an element with class header]
That's what will happen if you remove the space between img and .float-right in your stylesheet.