I have an unwieldy chunk of css that I am using to set the margin-top of the first child of an element. The first child can be any tag.
.comment-description p:first-child,
.comment-description ol:first-child,
.comment-description ul:first-child,
.comment-description pre:first-child,
.comment-description blockquote:first-child
{
margin-top:0px;
}
I'm sure that I can chop this down, but since I don't get to design too often, I can't remember a better way. Can I use something like:
.comment-description *:first-child
{
margin-top:0px;
}
Unfortunately this doesn't work.
You may be interested in:
.comment-description > :first-child {} - select only immediate children
or
.comment-description :first-child - select first child of all children elements
See:
http://jsfiddle.net/9VqsW/1/
To clarify things a little:
.element selector - selects all descendants that match selector. It doesn't matter if selector is a class, pseudo-class or ID.
.element > selector - selects only on the direct children that match selector
It looks like you want:
.comment-description > :first-child{
....
}
.comment-description :first-child
{
margin-top:0px;
}
Has the same effect as
.comment-description *:first-child
{
margin-top:0px;
}
Have a look here.
Related
In css I know you can select elements beneath their parent with the > selector:
#myDiv > p {
line-height: 1;
}
Is it possible to do the same for elements with a certain set of classes beneath that element, eg:
#myDiv > .classA .classB {
line-height: 1;
}
So that any child element with classes .classA .classB will get the treatment?
I've tried this and it doesn't seem to be working, and am not sure if I'm going down the right path or if I'm close.
This is a limitation of CSS that you have to repeat your self by doing
#myDiv > .classA, #myDiv > .classB
as your selector. Most CSS preprocessors can make this less of a challenge to keep things DRY.
Yes, you can - but you have to follow the rules. A space character is also a descendant selector, and that's not what you want. If you want to select all descendants that have both classes, try:
#myDiv > .classA.classB {
line-height: 1;
}
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; }
I have the following:
<a class="folder"><span>Background</span></a>
and the following CSS:
ul.arbo li > a:hover span,
ul.arbo li > a.current span {
background: #999999;
}
How can I modify the CSS so it does NOT apply if the link has a class of folder. In other words so it will not apply for the above HTML
You can do in css with negation pseudo-class selector :not , as follows:
:not(.folder) {
}
See working demo (provided by insertusernamehere).
CSS3 has the :not() selector, which you can add to your CSS (or you could do this with jQuery, either way). Mind you, this will only work in newer browsers.
http://www.w3schools.com/cssref/sel_not.asp
:not(.folder)
In your instance:
ul.arbo li > a:not(.folder):hover span,
ul.arbo li > a:not(.folder).current span { }
You don't need JavaScript or jQuery for this, and you can do it without CSS3 too (which may be relevant depending on what browsers you plan on supporting).
Just add another rule to prevent the background from changing on certain elements, like this:
ul.arbo li > a.folder:hover span
{
background: inherit;
}
Working example.
:not(.folder) {
}
Is a good solutions.Don't forget to check what browser do you want too work!
:not selector is a CSS3 selector and not all the browser support it...for example IE8 and earlier do not support the :not selector.
In CSS, is it possible to recursively select all :last-child from body?
Given this markup:
<body>
<div id="_1">
<div id="_2"></div>
</div>
<div id="_3">
<div id="_4">
<div id="_5"></div>
<div id="_6"></div>
</div>
</div>
</body>
I am looking for div no. 3, 4 and 6
Another way to put it is this:
body > :last-child,
body > :last-child > :last-child,
body > :last-child > :last-child > :last-child,
body > :last-child > :last-child > :last-child > :last-child {
/* My stuff here */
}
But obviously this is not a good approach.
No, unfortunately that's just about the only way to do it without modifying the HTML.
There has been at least one request for recursive versions of the :first-child and :last-child pseudo-classes, but it doesn't seem to have gained much favor. Notice it suggests nesting and repeating the pseudo-classes in the same way as in your question:
Currently, AFAIK, we can only match children up to some exact nesting level known in advance (3 in the example below):
.container > :first-child,
.container > :first-child > :first-child,
.container > :first-child > :first-child > :first-child {}
We cannot use just :first-child context selector since it would also select first children of blocks that are not first children themselves.
So we need a sort of recursive selector that matches not just first of last child, but recursively matches all first-most and last-most elements regardless of their nesting level.
body :last-child {
color:red;
}
body :not(:last-child) :last-child {
color:initial;
}
Any last-child element that's a descendant of one that's not a last-child will have the change reversed.
No need to chain all the way. It would be simply like this
div:last-child {
/* Your GREAT css */
}
Demo
Update: On that case, give the div2 a typical class and use :not() to push out of the selection
div:last-child:not(.nolist) {
border: 1px solid red;
}
Demo
I have to select all the elements of html ( from * ) except the children one specific div.
how can I make use it of :not of css3 ?
(*) - children of (#myDiv)
You can't do that, as the selector to find any child of #myDiv would be
#myDiv > *
But that's not a simple selector that could fit in :not().
Your best bet is to apply styles to * and override (or "revert") them in #myDiv > *:
* {
color: red;
}
#myDiv > * {
color: black;
}
jsFiddle preview
This should work:
:root, :not(#myDiv) > *
The first part there will match the root element. The second part will match anything with a parent as long as that parent is not #myDiv.