This question already has answers here:
CSS selector for first element with class
(23 answers)
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 5 years ago.
I'm trying to select the first td.is-active inside my tbody. The .is-active style is well accepted, but it's impossible to add a radius to the first (and only first) .is-active.
Full code here.
Or just my SCSS:
td {
&.is-active {
background-color: $color5;
&:first-child {
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
}
}
}
An idea ? Thanks.
CSS properties are not cumulative and do not support sub-selection. td.is-active:first-child will not select the first element within the .is-active group. It will select the first td if it has the .is-active class, and no td matches this condition.
td:first-child will always select the first td, regardless of its class.
You are looking for the :first-of-class selector, which, unfortunately, doesn't exist.
Related
This question already has answers here:
Specificity rules for comma delineated lists
(4 answers)
Closed 2 years ago.
What is the proper way of computing the specificity for comma-separated group selectors?
The specificity for the following selector, for example, is 0,1,2,2 (1 for head, 1 for a, 10 for .left, 10 for :hover, and 100 for #title):
head #title .left a:hover
What would be the specificity for this selector? Would it also be 0,1,2,2? Or is this treated as multiple selectors, and a specificity has to be computed for each?
head,#title,.left,a:hover
In your first example you have ONE selector. It is a selector comprised of multiple simple selectors separated by descendant combinators. But it is still one selector.
In your second example you have FOUR selectors. The comma separates selectors.
ยง5. Groups of
selectors
A comma-separated list of selectors represents the union of all
elements selected by each of the individual selectors in the list.
For example, in CSS when several selectors share the same declarations,
they may be grouped into a comma-separated list.
Specificity applies to a single selector, so in your second example, which represents four distinct selectors, you need to calculate the specificity for each one separately.
Think about it this way:
The purpose of specificity is to establish which CSS rule gets applied to an HTML element when there are multiple selectors targeting the same element.
.intro {
border: 2px dashed red;
}
div {
border: 1px solid black;
}
<div class="intro">text</div>
Both selectors above are targeting the same element. A class selector has more specificity than a type selector (10 v 1), so the class wins.
On the other hand, a comma-separated list of selectors applies the same rule to different elements, so specificity is not an issue.
You don't normally do this:
div, .intro {
border: 1px solid black;
}
<div class="intro">text</div>
... because it's redundant.
Comma separation is meant to consolidate selectors like this:
h1, h2, h3 {
color: red;
}
<h1>text</h1>
<h2>text</h2>
<h3>text</h3>
... which has nothing to do with specificity.
This question already has answers here:
How can I apply styles to multiple classes at once?
(9 answers)
Closed 4 years ago.
Is theres a way with css only to apply a specific style to an element when using an id selector inside a css ??
html:
<div Id="MyClassId"> blablabla </div>
css:
.MyOwnFancyDiv{
font-size: 12pt;
color: #333333;
/* ... */
}
/**
Select a particular element and need to apply the MyOwnFancyDiv style
**/
#MyClassId{
/* want to apply the MyOwnFancyDiv style to this particular element */
}
Thanks
You asked:
I want to apply the MyOwnFancyDiv style to this particular element [the id element]
This can be done as specified -- only via CSS -- like so:
.MyOwnFancyDiv,
#MyClassId {
font-size: 12pt;
color: #333333;
/* ... */
}
This will apply all style rules to each element specified (so the class MyOwnFancyDiv and the id element MyClassId.
This should solve your question. If not, please can you edit and clarify the criteria and scope of your question. Thanks.
This question already has answers here:
Apply CSS Style on all elements except with a SPECIFIC ID
(3 answers)
Closed 6 years ago.
How do I cancel the changes to one individual element in CSS?
Example:
a {
text-decoration: line-through;
color: green;
}
Now I would like at the end, a.test to ignore all rules and be displayed in the default way.
The normal colors and decorations of a link would show up on a page without any CSS influence.
All I found was to change every property that changes the element to initial. Is there a universal command that would exempt a.test from all changes?
You can exclude with the :not() CSS pseudo selector
a:not(.test) {
text-decoration: line-through;
color: green;
}
Demo: https://jsfiddle.net/azizn/d17vdf35/
This question already has answers here:
Change last letter color
(8 answers)
Closed 8 years ago.
Is there a way to style just the last letter in CSS?
I know that for the first letter I can use:
p::first-letter {
color: red;
}
But how to style the last letter?
There is no last-letter selector instead wrap it in span and style it
p::first-letter, p span {
color: red;
}
<p>test test tes<span>t</span></p>
This question already has answers here:
Ampersand (parent selector) inside nested selectors [duplicate]
(3 answers)
Closed 8 years ago.
Less
.list a{
.landscape&{
height: 100%;
}
}
Outputs
.landscape.list a {
height: 100%;
}
Which means "all a tags whose parents have both .landscape and .list"
Less
.list a{
&.landscape{
height: 100%;
}
}
Outputs
.list a.landscape {
height: 100%;
}
Which means "all a tags which have class 'landscape' and whose parents have .list"
And that makes sense. But if I remove the "a" tag from those selectors, the '&' only changes the concatenation order of .list and .landscape.
What's the point ? When should I use &.class and when should I use class.& ?
The & in Less denotes the parent selector. So wherever you put the &, it replaces it with the parent selector in the CSS, if you have a space before it.
If not, i.e., no space is given before the &, it becomes the child and appends the selector with its parent like in your case.
References:
Less CSS Secrets-of-the-Ampersand
Parent Selector
The article "LESS CSS: Secrets of the Ampersand" details the difference well. I'll highlight the key uses:
Attach a class to an existing selector
Change state based on parent classes
Filter a nested selector to only match certain elements
Avoid repetition when selecting repeated elements
Simplify combinatorial explosions
The latter is my favorite. I've used it to handle some crazy IE issues. Check this out:
/**
* Add a top border to paragraphs,
* but remove that border when a preceding paragraph already has one.
*/
p {
border-top: 1px solid gray;
& + & {
border-top: 0;
}
}
I think if you can wrap your mind around what this usage of & does, all the other uses become obvious.