[attribute = value]를 다음과 결합하십시오. nth-child()

Question

저는 LESS를 사용 중이며 유형이 텍스트 인 특수 입력을 일치 시키려고합니다.

현재, 내가이 일을 해요 :

td { 
    input[type=text] { 
     width: 100px; 
    } 
} 

를 입력 확인란의 나의 두 번째 입력의 경우, 나는 또 다른 폭이 필요합니다. 나는 이것을 시도했다 :

td { 
    input[type=text] { 
     width: 100px; 

     &:nth-child(2) { 
      width: 40px; 
     } 
    } 
} 

그러나 이것은 작동하지 않을 것이다. [type=text]과 :nth-child()을 결합하는 방법에 대한 아이디어가 있으십니까? 버그없이

Answer 1

다음과 같은 CSS로 변환해야합니다 귀하의 이하 : 그러나

td input[type=text] { 
    width: 100px; 
} 

td input[type=text]:nth-child(2) { 
    width: 40px; 
} 

당신이 당신의 텍스트 입력의 형제 자매와 같은 다른 요소가있는 경우, 이러한 :nth-child() 만 보이는대로 :nth-child() 선언을 방해 할 수있다 같은 부모의 모든 다른 형제 자매와 관련된 요소의 위치뿐만 아니라 그 종류의 다른 요소 (즉, input[type=text])도 마찬가지입니다. 예를 들어 두 번째 자녀가 label 인 경우 두 번째 자녀가 더 이상 두 번째 자녀가 아니며 그 위치는 라벨로 찍었습니다.

당신이 당신의 td 내에있는 유일한 입력이 [type=text] 모든 경우 대신 :nth-of-type()을 사용하여 멀리 얻을 수 있어야합니다 : 그것은 단지에서 보이는 것을,

// LESS 

td { 
    input[type=text] { 
     width: 100px; 

     &:nth-of-type(2) { 
      width: 40px; 
     } 
    } 
} 

는

/* CSS */ 

td input[type=text] { 
    width: 100px; 
} 

td input[type=text]:nth-of-type(2) { 
    width: 40px; 
} 

그냥 기억하지만 요소 이름이 input이고 [type=text] 속성이 아닙니다.

또는 당신은 단지 당신이 가 첫 번째 입력 다음에 하나 잡아 대신 일반 형제 선택기를 사용하여 두 개의 텍스트 입력을해야합니다 알고있는 경우 :

// LESS 

td { 
    input[type=text] { 
     width: 100px; 

     & ~ input[type=text] { 
      width: 40px; 
     } 
    } 
} 

/* CSS */ 

td input[type=text] { 
    width: 100px; 
} 

td input[type=text] ~ input[type=text] { 
    width: 40px; 
}