Thursday 19 October 2017
html - select an element "inside" the :first-child pseudo selector using CSS
Answer
Answer
Good day
all.
I have a problem, a structure like
this:
class="selected">
class="selected">
I
would like to select the first and last that have selected on the parent... the pseudo
code should be like
this:
li.selected span {
background: #FF4D6E; color: white; }
li.selected:first-child
span{border-radius:30px;}
li.selected:last-child
span{border-radius:30px;}
the
problem is that the span
is inside the collection of
.selected
so I would like to have the first
.selected
, and its
span
That is
not possible because .selected
class element is not the first
of its parent. But you can do a workaround here by using sibling selectors as shown
below:
/* first child
*/
li.selected span{
border-radius:
30px;
}
/* middle children */
li.selected +
li.selected span{
border-radius:
0px;
}
/* last child */
li.selected
~ li.selected ~ li.selected span {
border-radius:
30px;
}
Above
code is assuming you have only three .selected
elements. If you
have more and you know the count then change the last child code in the above with
respect to the count. For example, if you have four .selected
elements.
li.selected ~
li.selected ~ li.selected ~ li.selected span {
border-radius:
30px;
}
href="http://jsfiddle.net/avLzhvno/1/" rel="nofollow">Example
Fiddle
php - file_get_contents shows unexpected output while reading a file
I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print &q...
-
I have an app which needs a login and a registration with SQLite. I have the database and a user can login and register. But i would like th...
-
I would like to use enhanced REP MOVSB (ERMSB) to get a high bandwidth for a custom memcpy . ERMSB was introduced with the Ivy Bridge micro...
-
According to my understanding, and my calculator, cos(90 degrees) equals 0 . In my code, I have a funct...
No comments:
Post a Comment