Related questions

select nth-child from 1st to 4th

2018-01-14 09:44 jd440 imported from Stackoverflow

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

  • E-Mail auto suggestions in a form

    Can anyone help me to auto suggest email in a form ?

    After fetching the name from the name field, when he clicks the email field the name should be suggested and after pressing @ domain suggestion should come !

    Thanks in Advance :)

  • Wordpress: external Font doesn't show in Frontend

    im trying to include an external Font in Wordpress with the follow code and it doesn't work:

    @font-face {
  font-family: 'Splatoon';
  src: url('http://paperyoshi.at/font/Splatoon/Splatoon.eot?#iefix') format('embedded-opentype'),
       url('http://paperyoshi.at/font/Splatoon/Splatoon.woff') format('woff'),
       url('http://paperyoshi.at/font/Splatoon/Splatoon.woff2') format('woff2'),
       url('http://paperyoshi.at/font/Splatoon/Splatoon.ttf')  format('truetype'),
       url('http://paperyoshi.at/font/Splatoon/Splatoon.svg#svgFontName') format('svg');
}

body {
    font-family: Splatoon;
}
  • flex element has same height as his parent

    How do I give a flex element (#inputs) the same height as it's parent element (nav)?

    I have tried many ways, but it doesn't work. For example flex element inserted block element, then I wanted the block element to have the same height as it's parent.

    Here is my code:

    nav{
    display: block;
    border:1px solid gray;
}
#inputs{
    display: flex;
    border:1px solid black;
    float: right;
}
input[name="searching"] {
    width:302px;
    height:24px;
}
input{
    display:block;
}
    <nav>
  <ul>
    <a href="#main"><li>main</li></a>
    <a href="#statistic"><li>statitic</li></a>
    <a href="#help"><li>help</li></a>
    <a href="#aboutme"><li>about me</li></a>
    <a href="#news"><li>news</li></a>
    <a href="#rules"><li>rules</li></a>
  </ul>
  
  <div id="inputs">
    <input type="search" name="searching">
    <input type="button" name="btn" value="search">
  </div>
</nav>

  • Label + Input Adjacent CSS Selector not working

    I can get a p+p adjacent selector working, but not label + input. Why could this be?

    p+p {
  color: red;
  /* Works fine! */
}

label+input {
    background-color: red;
  /* Doesn't work */
}
    <p>Test</p>
<p>Test</p>
<br>
<label>Test</label><input type='checkbox'>

    https://jsfiddle.net/h16engzw/

  • CSS: before pseudo elements between <li> with <a> tag

    I'm coding for lines which should be divided by "|". BTW the first element don't need to have separator before. This code doesn't work for me. 

    .header-level-1 .clearlist li a:before {
content: "|";}

.header-level-1 .clearlist li a:first-child:before {
   content: ""; 
}
    <div class="header-level-1">
  <!-- Login -->
  <ul class="clearlist">
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
  </ul>
</div>

  • Landing Page Not Loading - Selenium Web Form Automation

    Creating a script that will log in into the site below and automatically log values into a web form. The problem is that once I login, the landing page is blank (i.e it loads headers but that's it). My code is below:

    profile = webdriver.FirefoxProfile()
profile.accept_untrusted_certs = True
browser = webdriver.Firefox(profile)
browser.get('https://cmsdb.darkcosmos.org/experiments/run/new')
print('Connected to Server')
time.sleep(2) # Wait for page to load
login_button = browser.find_element_by_xpath('/html/body/div/div[5]/main/div/div[1]/div/div[3]/button')
login_button.click()
time.sleep(2) # Wait for pop-out to load
browser.find_element_by_xpath('//*[@id="username"]').send_keys(username)
browser.find_element_by_xpath('//*[@id="password"]').send_keys(password)
login_attempt = browser.find_element_by_xpath('/html/body/div/div[4]/div/div/div/div/div/form/button[1]')
login_attempt.submit()
print('Logged In')
time.sleep(2) # Wait for new page to load
browser.find_element_by_xpath('//*[@id="title"]').send_keys('Title') #  Code breaks here. It cannot find the title entry area because the new page is blank.

    I've tried making a Firefox profile, giving the page time to load, and turning certificates off. It loads just fine when I manual login. Thanks in advance for the help!