I want to do the following:
.feed > :not(:nth-child(n+5):nth-child(-n+10))
But apparently that's not available in css. Is there any way around this?
You can use
.feed > :not(:nth-child(n+5)), .feed > :not(:nth-child(-n+10)) {
background: red;
}
Demo
Explanation
That's because :nth-child(n+5):nth-child(-n+10) means :nth-child(n+5) AND nth-child(-n+10).
But according to de Morgan's laws,
not(A AND B) = not(A) OR not(B)
Then, if you want to negate it, instead of :not(:nth-child(n+5):nth-child(-n+10)), you need the OR operator ,:
:not(:nth-child(n+5)), :not(:nth-child(-n+10))
It seems like you're trying to select all elements that aren't the 5th - 10th child of .feed. Another way to do that would be to select the 1st-4th child elements, and then the 11th+ child elements.
This will do it:
.feed > :nth-child(-n+4), .feed > :nth-child(n+11) {
...
}
http://jsfiddle.net/9ZSeZ/1/
Related
Hello all you smart CSS people... I've got a Doozey!
https://tritonmedicine.com/services is the page in question
It's the title down the page a bit, next to the picture
How do I style ONLY the ::before pseudo-class/id for the "preventative care" title? I'm trying to add the word "ADULT" in front of it, but if I use the id#1506, it won't work. If I only use the class (.tab-pane.active), it puts "ADULT" in front of every active title. What am I doing wrong here?
This DOESN'T work:
#1506.tab-pane.active > div:nth-child(2) > div > h3::before {
content: 'ADULT';
}
This DOES work (but styles them all, which I don't want):
.tab-pane.active > div:nth-child(2) > div > h3::before {
content: 'ADULT';
}
Any assistance is much appreciated :)
You can't select id that start with number in CSS selectors
For more CSS-Tricks
Solution
try somthing like these tab1506 or tabPane1506 or tp1506
But there is another solution of your problem, you can use
Attribute selector:
[id="1506"].tab-pane.active > div:nth-child(2) > div > h3::before {
content: 'ADULT';
}
For more read here
In my app.component.css I have the following:
* ~ * {
margin-top: 24px;
}
which does apply some margin-top to all elements following the first one.
This is not quite what I want, as I only need to target the direct children of my host.
So I did the following :
:host > * ~ :host > * {
margin-top: 24px;
}
Unfortunately that doesn't do anything. What am I missing here ?
You only need one :host > — the sibling combinator will relate the two * selectors for you:
:host > * ~ *
This reads as
Select any element
that is a following sibling of any element
that is a child of the host element.
... which implies that the subject of the selector is a child of the same host element as the element that it follows, since that's what the word "sibling" means.
I'm attempting to put CSS styles on the list items in the first line of a list but it seems that neither Chrome, Firefox, nor Safari will accept the style.
ul:first-line > li {
display: inline;
/* my styles here */
}
Have I overlooked the way in which I'm specifying the style, is this an oversight in CSS implementation or a deliberate CSS specification? If it is the latter, is there a good rationale behind this?
JSFiddle: http://jsfiddle.net/e3zzg/
Edit:
Please note, it seems pretty definitive that this can currently not be achieved using CSS alone but from a research standpoint and for posterity, I'm curious as to why this is. If you read the W3C CSS specification on the firstline pseudo-element there doesn't seem to be any mention of inner elements. Thanks to everyone trying to provide alternate solutions, but unless there actually is a CSS solution, the question here is 'why', not 'how' or 'is it possible'.
Here's "Why" What You Want to Do Cannot Be Done
The selectors 3 spec is a little more up to date. The following is taken from that.
The "why" is because the :first-letter is pseudo-element, that is, a "fake" or "false" element. It is producing a "fictional tag sequence", which is not recognizable in relation to other real elements. So your...
ul:first-line > li
...suffers from the same issues as this selector string...
ul:before + li
...where the combinator (whether > or +) is only looking at the "element" not the "pseudo-element" for selection. The second string does not target the "first" li of the ul that is following a :before pseudo-element. If it were to work at all, it would target an li that follows the ul in the html sequence (which, of course, there would never be one in a valid html layout).
However, a selector string similar to the second one above would not work anyway, because in actuality, the form of the above strings is not valid, as confirmed by the statement in the specifications that says:
Only one pseudo-element may appear per selector, and if present it
must appear after the sequence of simple selectors that represents the
subjects of the selector.
In other words, a pseudo-element can only be positioned dead last in the selector sequence, because it must be the target of the properties being assigned by that selector. Non valid forms apparently are simply ignored just like any invalid selector would be.
I think you would be better off with:
ul > li:first-child
:first-line is only useful for text elements
The only option to make a class apart for the second line is adding through Javascript a concrete className to them and setting the background for them. To get the current line you should iterate the elements and compare it's distance to the list top and it's previous siblings. I made a jQuery example so you can get the idea: http://jsfiddle.net/JmqxM/
$("ul.numerize-lines").each(function () {
var list = $(this);
var currentDistance = 0;
var currentLine = 0;
list.find("li").each(function () {
var item = $(this);
var offset = .offset();
var topDistance = offset.top;
if (topDistance > currentDistance) {
currentDistance = topDistance;
currentLine += 1;
}
item.addClass("line-" + currentLine);
});
});
and the css:
ul li.line-2{
background-color: #FFF;
}
Pretty sure the :first-line should be applied to the element itself that contains the text (rather than the parent, as you have).
ul > li:first-line { /*style*/ }
Or if your list items contain tags or something else like that...
ul > li p:first-line { /*style*/ }
If I have a table with two columns, how do I specify a padding or any other css so that it is applied just for the first column of <td>s. Also how do I style an n-th column similarly?
You could use the n-th child selector.
to target the nth element you could then use:
td:nth-child(n) {
/* your stuff here */
}
(where n starts at 1)
The :nth-child() and :nth-of-type() pseudo-classes allows you to select elements with a formula.
The syntax is :nth-child(an+b), where you replace a and b by numbers of your choice.
For instance, :nth-child(3n+1) selects the 1st, 4th, 7th etc. child.
td:nth-child(3n+1) {
/* your stuff here */
}
:nth-of-type() works the same, except that it only considers element of the given type ( in the example).
For more information about nth-child
https://developer.mozilla.org/es/docs/Web/CSS/:nth-child
If you've to support IE7, a more compatible solution is:
/* only the cells with no cell before (aka the first one) */
td {
padding-left: 20px;
}
/* only the cells with at least one cell before (aka all except the first one) */
td + td {
padding-left: 0;
}
Also works fine with li; general sibling selector ~ may be more suitable with mixed elements like a heading h1 followed by paragraphs AND a subheading and then again other paragraphs.
This should help. Its CSS3 :first-child where you should say that the first tr of the table you would like to style. http://reference.sitepoint.com/css/pseudoclass-firstchild
To select the first column of a table you can use this syntax
tr td:nth-child(1n + 2){
padding-left: 10px;
}
ok I know how to do both these things separately:
#elemID { } /* selects only one element */
#elemID * { } /* selects all its children elements but not the element itself */
And I know I can do it like this:
#elemID, #elemID * { }
But is there a way to avoid this repeating ?
No, there is nothing shorter than that.
Note that if you really only want all the children of #elemID, and not all the descendants, you need to use the child combinator:
#elemID, #elemID > *
And as Šime Vidas has commented, some properties like color are automatically inherited by descendant elements by default. If you're trying to give text color to #elemID, you should not need to apply it explicitly and recursively to the elements inside it. See the SitePoint Reference on inheritance in CSS for details.
No. But you could select its parent if an equivalent selector exists:
.parent * { ... }