How can i use pseudo class nth-of-type with a complex selector?

user_17540080 0
Viewed 73

Good time everybody, i have several elements with class 'someclass' and name 'somename', and a complex selector like:

.someclass[name="somename"]

And i want to add style only to 2nd element. So i try

.someclass[name="somename"]:nth-of-type(2) {}

but it does not work as it have to work. While if selector is not complex, for example, just:

.someclass:nth-of-type(2) {}

it works normally. I tried different kind of brackets, but still have this problem. What is a solution?

UPDATE: I was looking for a way to use nth-of-type for elements, that goes not one-by-one.

My code was like:

<div class="someclass" name="somename">1</div>
<div class="someclass2" name="somename">2</div>
<div class="someclass" name="somename">3</div>
<div class="someclass" name="somename">4</div>
<div class="someclass" name="somename">5</div>

That's why my code does not worked! Finally there are some solutions in comments

pseudo-element css
2 Answers

codepen

I opened CodePen and wrote this

In the HTML section:

<div name='blue' class='yellow'>red</div>
<div name='blue' class='yellow'>red</div>
<div name='blue' class='yellow'>red</div>
<div name='blue' class='yellow'>red</div>

In the CSS section:

.yellow[name='blue']:nth-of-type(2) {
  color: red;
}

and, as you see in the photo, seems to work fine.

If you need more resources look here under the section Attribute Selectors

user_138332030

Works for me just as you described.

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .someclass {
      height: 200px;
      width: 100px;
      border: 1px solid lightseagreen;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px;
  }

  .someclass[name="somename"]:nth-of-type(2) {
      background: cornflowerblue;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
<div class="someclass" name="somename">1.</div>
<div class="someclass" name="somename">2.</div>
<div class="someclass" name="somename">3.</div>
<div class="someclass" name="somename">4.</div>
<div class="someclass" name="somename">5.</div>
</body>
</html>

Solution for UPDATE

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      width: 100%;
  }

  .container div {
    height: 200px;
    width: 100px;
    border: 1px solid lightseagreen;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
  }

  .container div:nth-child(2) {
      background: cornflowerblue;
  }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="someclass" name="somename">1.</div>
      <div class="someclass2" name="somename">2.</div>
      <div class="someclass" name="somename">3.</div>
      <div class="someclass" name="somename">4.</div>
      <div class="someclass" name="somename">5.</div>
    </div>
  </body>
</html>

user_159100070
Related