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

CSS/HTML draw quadrilateral

I wanted to programmatically draw quadrilaterals in HTML/CSS/JavaScript as below by just depending on the side widths, not by skew or rotation.

Eg: side-top: 40inch, side-bottom: 30inch, side-left: 55inch, side-right: 57inch

Can someone suggest me a way to implement this.
How to expand a cropped image into a box?
I am given a JPEG image which needs to be cropped using CSS and then expanded to fit a 1200px x 1000px box.

Here is what I have so far:
```
#top-image {
    display: block;
    clip-path: inset(0px 103px 45px 105px);
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
    height: 1000px;
}
```
```
<img src="https://via.placeholder.com/750x500" id="top-image">
```
The clip-path property crops the original image which is 750px x 500px. When I set width and height to values mentioned in the above snippet, two problems occur:
- The pixel values used in clip-path are based on the new 1200 x 1000 box, not for the original image.
- The original (uncrossed) image (including cropped parts) is expanded to the box. However, I would like to expand the cropped image to fill the box.
  
  What is the best way of doing this using pure CSS?
Update 1: I can solve the first issues by using percentages instead of pixels.

CSS3 Preloader Code Not Showing Background Color

I am using CSS3 Designed Preloader for my website.

I am using below CSS

#preloader
    {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

@-webkit-keyframes moveup
    {
      0%, 60%, 100%
          {
            -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
                    transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
          }
      25%
          {
            -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
                    transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
          }
    }
@keyframes moveup
    {
        0%, 60%, 100%
            {
                -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
            }
        25%
            {
                -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
            }
    }
@-webkit-keyframes movedown
    {
        0%, 60%, 100%
            {
                -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
            }
        25%
            {
                -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
            }
    }
@keyframes movedown
    {
        0%, 60%, 100%
            {
                -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
            }
        25%
            {
                -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
            }
    }

.layer
    {
        display: block;
        position: absolute;
        height: 3em;
        width: 3em;
        box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
              transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
    }
.layer:nth-of-type(1)
    {
        background: #534a47;
        margin-top: 1.5em;
        -webkit-animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal;
              animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal;
    }
.layer:nth-of-type(1):before
    {
        content: '';
        position: absolute;
        width: 85%;
        height: 85%;
        background: #37332f;
    }
.layer:nth-of-type(2)
    {
        background: #5a96bc;
        margin-top: 0.75em;
    }
.layer:nth-of-type(3)
    {
        background: rgba(255, 255, 255, 0.6);
        -webkit-animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
              animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
    }

I have used the following HTML Code

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <?php include("meta_css.php"); ?>
</head>
<body>
    <!--  THEME PRELOADER AREA -->
    <div id="preloader">
        <i class='layer'></i>
        <i class='layer'></i>
        <i class='layer'></i>
    </div>
    Hi this is a demo content
 </body>
</html>

The problem I'm facing with this code is that the preloader is being visible on site load with the contents that are in HTML.

i.e I want the preloader with background white so that whatever the HTML page is loading it's not visible. In the current scenario, the preloader is also visible and the background HTML page is also visible. I want to hide the background image page by giving the prealoder div a background colour so that it does not show anything behind.

Can anyone help me out with this?

I have the JS Code written to remove the preloader one the page is loaded. The only thing I am stuck at is that the visibility of the background contents while loading.

How to click javascript:void(0) link with selenium?
I am using selenium and chrome to automate the clicks of a page with python.

I am getting stuck not being able to click on the following href link:
```
<a href="javascript:void(0)" class="addSuppData-trigger pts" data-target="edit_3-1" style="padding-right:6px;float:right;">
            <i class="material-icons black-text tiny-small">edit</i></a>
```
I have tried using xpath, css, and linktext to no avail.

sample code:
```
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, '//*[@id="row-group-1"]/td[1]/div/div[2]/a/i' ))).click()
```
The goal is to click the pen, then select the item from the drop down. screen shot of button

The second highlight line is the pen. html tree
How to find elements that do not include a certain class name with selenium and python
I want to find all the elements that contain a certain class name but skip the ones the also contain another class name beside the one that i am searching for

I have the element <div class="examplenameA"> and the element <div class="examplenameA examplenameB">

At the moment i am doing this to overcome my problem:
```
items = driver.find_elements_by_class_name('examplenameA')
for item in items:
    cname = item.get_attribute('class')
    if 'examplenameB' in cname:
        pass
    else:
        rest of code
```
I only want the elements that have the class name examplenameA and i want to skip the ones that also contain examplenameB

How to find button with selenium WebDriver in C#

I tried to perform click in my html page but it says unable to find the element.

Here is the HTML:

<input type="button" id="btnStopSs" value="Stop" onclick="start_stop_Ss('tag_stopSs');">

Code:

IWebElement user = foxdriver.FindElement(By.Name("user_name"));
IWebElement pwd = foxdriver.FindElement(By.Name("user_passwd"));
user.Clear();
pwd.Clear();
user.SendKeys("admin");
pwd.SendKeys("admin");
IWebElement login = foxdriver.FindElement(By.Name("btnLOGIN"));
login.Click();
Thread.Sleep(3000);
IWebElement stopPage = foxdriver.FindElement(By.TagName("p"));
stopPage.Click();
Thread.Sleep(3000);
IWebElement stoptab = foxdriver.FindElement(By.Id("submenuOnLeftArea0_1"));
stoptab.Click();
Thread.Sleep(3000);
IWebElement stopbtn = foxdriver.FindElement(By.Id("'btnStopSs"));   //=>> Error OpenQA.Selenium.NoSuchElementException: 'Unable to locate element: #btnStopss'
stopbtn.Click();
Thread.Sleep(10000);
IWebElement startbtn = foxdriver.FindElement(By.Id("btnStartSs"));
stoptab.Click();

Related questions

select nth-child from 1st to 4th

1 answer

See also questions close to this topic