select nth-child from 1st to 4th
I which to reach the 4th first child. is there a better syntax than?
footer div:first-child, footer div:nth-child(2), footer div:nth-child(3), footer div:nth-child(4) {display: inline-block;}
1 answer
-
answered 2018-01-14 10:01
Danield
Yes, there's a better syntax.
The selector you're looking for is:
:nth-child(-n + 4)
Here's a demo:
.wpr {} .wpr div { width: 50px; height: 50px; background-color: red; display: inline-block; margin: 10px; } .wpr div:nth-child(-n + 4) { background-color: green; }
<div class="wpr"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
See MDN - nth-child
:nth-child(-n+3)
Represents the first three elements among a group of siblings.
See also questions close to this topic
-
CSS3 Flex layout leaving empty space on the right
I use 4 column layout. Every div Width is 25%. Leaving empty space on the right. How to fix it?
body,html{margin:0;padding:0}.flexbox-slider{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:364px;visibility:hidden;margin:auto;padding-bottom:40px}.flexbox-slider .flexbox-slide img{position:absolute}.flexbox-slider .flexbox-slide{-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-delay:0s;transition-delay:0s;width:25%;height:364px;position:relative;overflow:hidden;cursor:pointer;visibility:visible}.flexbox-slider .flexbox-slide:after{position:absolute;top:0;left:0;content:"";display:block;width:100%;height:100%;background-color:rgba(255,255,255,.6);z-index:2;opacity:0}.flexbox-slider .flexbox-slide img{osition:absolute;height:auto;width:auto;min-width:100%;min-height:100%;z-index:1}.flexbox-slider .flexbox-slide .text-block{position:absolute;left:30px;bottom:30px;max-width:400px;padding:20px;border-radius:5px;background-color:rgba(0,0,0,.6);color:#fff;z-index:4;visibility:hidden}.flexbox-slider .flexbox-slide .text-block h3{font-size:20px;font-weight:700}.flexbox-slider:hover .flexbox-slide:hover{-ms-flex-negative:0;flex-shrink:0;width:780px}.flexbox-slide .txt{z-index:89;position:absolute;bottom:-90%;left:0;width:100%;height:100%;display:block;padding:25% 50px 1px;color:#fff;transition:bottom 3s,background-color 0s;-moz-transition:bottom 3s,background-color 0s;-webkit-transition:bottom 3s,background-color 0s;-o-transition:bottom 3s,background-color 0s;-webkit-transition-property:background-color;-webkit-transition-duration:.5s;-webkit-transition-timing-function:ease}.flexslider,.slides li{height:650px}.flexbox-slide .txt span{width:85%;word-wrap:break-word;word-break:normal;display:block;margin-top:30px}.flexbox-slide p{font-size:18px;line-height:25px;color:#fff;font-weight:700}.flexbox-slide .txt:hover{bottom:-45%;background-color:rgba(0,0,0,.39)}.flexslider{position:relative;overflow:hidden;background:url(images/loading.gif) 50% no-repeat}.slides{position:relative;z-index:1}.flex-control-nav{position:absolute;bottom:10px;z-index:2;width:100%;text-align:center}.flex-control-nav a,.flex-control-nav li{display:inline-block;width:14px;height:14px}.flex-control-nav li{margin:0 5px;zoom:1}.flex-control-nav a{line-height:40px;overflow:hidden;background:url(images/dot.png) right 0 no-repeat;cursor:pointer}.flex-control-nav .flex-active{background-position:0 0}.flex-direction-nav{position:absolute;z-index:3;width:100%;top:45%}.flex-direction-nav li a{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute}.flex-direction-nav li a.flex-prev{left:40px;background:url(images/prev.png) center center no-repeat}.flex-direction-nav li a.flex-next{right:40px;background:url(images/next.png) center center no-repeat} I use 4 column layout. Every div Width is 25%. Leaving empty space on the right. How to fix it?
<html> <head></head> <body> <div class="flexbox-slider my-flexbox-slider" style=""> <div class="flexbox-slide"> <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> </div> <div class="flexbox-slide"> <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> </div> <div class="flexbox-slide"> <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> </div> <div class="flexbox-slide"> <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> </div> ... </div> </body> </html>
-
Image overflow onto another section Bootstrap 4
I am trying to have a PNG image overflow onto another jumbotron like this overflow_ex
.ilt-attendance { background: url(../images/will.png) left bottom no-repeat; overflow: visible; z-index: -1; background-color: #fff; }
<!-- START ILT Attendance START --> <section> <div class="jumbotron ilt-attendance"> <div class="container text-right"> <h1 class="display-4">ILT Attendance</h1> <p class="lead"> <a class="btn btn-primary btn-lg" href="S:\NMAlbuquerque 2\Tech Support Coaches and Sr’s\2018 ILT Training Info" target="_blank" role="button">Learn more</a> </p> </div> </div> </section> <!-- END ILT Attendance END -->
I appreciate any advice.
-
Side menu toggle transition effect?
I'm designing an app with Phonegap, which allows me to code with HTML5, CSS3 and JS. I created a toggle menu that when clicked shows and hides itself. This was accomplished by adding a "display: none" and "display: inline-block" property. I have read the others posts that reply to how to add transition to such property. My issue is that I'm totally lost as in where I need to add the CSS property, because I have my .css file and a script tag in my HTML file. Any thoughts please? :)
Here is my code:
/* This script is written in my HTML file inside a <script> tag*/ /* My JS */ function openSlideMenu() { $('#side-menu').css({"display": "inline-block"}); } function closeSlideMenu() { $('#side-menu').css('display','none'); } $(document).ready(function() { }); app.initialize();
.side-nav { box-sizing: border-box; z-index: 6000; position: absolute; height: 100vh; width: 70%; background-color: #7b66db; background-image: -moz-linear-gradient(135deg, #7b66db 4%, #9673fb 100%); background-image: -webkit-linear-gradient(135deg, #7b66db 4%, #9673fb 100%); background-image: linear-gradient(135deg, #7b66db 0%, #9673fb 100%); -webkit-box-shadow: 4px 0px 10px -2px rgba(0,0,0,0.49); -moz-box-shadow: 4px 0px 10px -2px rgba(0,0,0,0.49); box-shadow: 4px 0px 10px -2px rgba(0,0,0,0.49); }
<!-- MY IMAGES WON'T SHOW BECAUSE I HAVE THEM IN MY LOCAL FILES. THE IMAGE THAT SHOULD SHOW IS AN "X" ICON FOR CLOSE. --> <!-- Side Nav Menu --> <div class="side-nav" id="side-menu"> <div class="top-bar"> <div class="vpay-logo-div"> <a href="#"> <img src="img/vpay-logo.png" class="vpay-logo" alt="Brand Logo"> </a> </div> <div class="close-icon-div"> <a href="#" class="btn-close" onclick="closeSlideMenu()"> <img src="img/close-icon.png" class="close-icon-nav" alt="Close Icon"> </a> </div> </div> <nav> <ul> <li>List item</li> </ul> </nav> </div> <!-- /Side Nav Menu -->
-
How to use a selector to get the second and third element?
I need a way to get the value of the attribute xodd ( tzccftzxt, czofczec, az9faz8p ).
This is the html code:
<tr class=" deactivate" xeid="A1nOsGN0"> <td class="table-time datet t1523797200-8-1-0-0 ">15/04, 15:00</td> <td class="name table-participant"><a href="/soccer/italy/serie-a/ac-milan-napoli-A1nOsGN0/">AC Milan - <span class="bold">Napoli</span></a></td> <td class="center bold table-odds table-score">0:0</td> <td class="odds-nowrp" xoid="E-2r00txv464x0x6kc61" xodd="tzccftzxt"><a href="" onclick="globals.ch.togle(this , 'E-2r00txv464x0x6kc61');return false;" xparam="odds_text">4.24</a></td> <td class="result-ok odds-nowrp" xoid="E-2r00txv498x0x0" xodd="czofczec"><a href="" onclick="globals.ch.togle(this , 'E-2r00txv498x0x0');return false;" xparam="odds_text">3.53</a></td> <td class="odds-nowrp" xoid="E-2r00txv464x0x6kc62" xodd="az9faz8p"><a href="" onclick="globals.ch.togle(this , 'E-2r00txv464x0x6kc62');return false;" xparam="odds_text">1.87</a></td> <td class="center info-value">5</td> </tr>
and this is my python code:
for partita in response.css('tr.deactivate'): yield { '1': partita.css('td.odds-nowrp ::attr(xodd)').extract_first(), 'X': partita.css('td.odds-nowrp:nth-child(1) ::attr(xodd)').extract_first(), '2': partita.css('td.odds-nowrp:nth-child(2) ::attr(xodd)').extract_first(), }
But I only get:
1: tzccftzxt X: None 2: None
How can I get the second and the third value?
-
Get element id using element class
I'd like to get the id of the pressed element.
I know it's a very common question but I do not want a solution in jquery (I'm trying to use it as few as possible) I cannot modify the html, supposing is something like:
<p id='123' class='my_class'>x</p>
I cannot create something like:
<p id='123' class='my_class' onclick='console.log(this.id + " pressed");'>x</p>
This is my personal attempt:
$(document).on('click', '.my_class', this.id, function (id) { console.log( id + " pressed!"); });
But I keep obtaining this:
[object Object] pressed!
-
CSS selector does not work correctly
I am using the code
footer h1,h2,h3,h4,h5,h6{ color: #fff; margin: 10px auto; }
to select all h tags that are inside footer. There's a HTML tag footer and if I'm not mistaken, my code should select only those h1,h2,h3,h4,h5,h6 tags that are inside a footer tag. But surprisingly, when I test my code, it selects all other h1,h2,h3,h4,h5,h6 tags that are outside of the footer tag as well!
How's that possible? Is there something I'm missing?