최근에 사용한 CSS나 jQuery의 기술 을 정리합니다. 그 1

물품 쓰기

hove시 CSS를 비활성화합니다 ... pointer-events: none;

요소 순서를 CSS로 바꿉니다 ... flexbox

클래스의 몇 번째 요소로 지정 ... 의사 클래스 :nth-child()

hove 시 CSS 사용 안함

이전에 체크박스 값에 따라 버튼을 사용하지 않도록 설정하는 기사를 썼는데,

jQuery checkbox에 따라 전환

원래 버튼을 hover했을 때에 버튼의 색이 진해지는 등의 CSS는 그대로 적용되어 버리므로, 이용하는 측에서는 누르고 있는 감각(이라고 해도 올바른 것인가)이 있는데, 페이지가 진행되지 않는 것은 이상하다.

그래서 hover시 CSS를 무효화하는 방법을 조사했다.
버튼에.
CSS도 같은 요령으로 할까? 라고 생각했습니다만, 더 부담없는 방법이!

css

button[disabled] {
    pointer-events: none;
}

얼마나 간단! disabled 는 초기값에서는 pointer-eventsauto 로 하면 그 요소가 포인터 이벤트의 대상이 되지 않게 된다.

요소 순서를 CSS로 바꾸기

HTML은 변경하지 않고 CSS만으로 요소의 순서를 바꾸고 싶다!

none 사용

html

<div class="main">
  <ul>
　　<li class="text">22222</li>
　　<li class="text">33333</li>
　　<li class="text">11111</li>
　　<div>
  </ul>
</div>

상기의 코드에서는 숫자가 2→3→1이 되어 버리므로, 올바른 순서로 표시하고 싶다.
다만 HTML의 순서를 바꾸는 것이 아니라 CSS로 순서를 바꾼다. (예를 들어, PC와 스마트폰 버전으로 표시 순서를 바꿀 때 등에 사용)
이 때 사용하는 것이 flexbox

Flexbox 사용법

부모 요소에 css로 frexbox 추가.
이것을 추가하는 것으로, 부모 요소를 Flex 컨테이너에 설정.
Flex 컨테이너에 포함되는 아이 요소를 Flex 아이템으로서 설정된다.
게다가 display:flexbox; 로 줄을 서서 꼬인다. 초기값은 row. 세로(공식적으로는 겹쳐지도록)하고 싶었으므로 이번은 column로 지정.

css

main {  
    display:flex;
        flex-direction:column;
}

또한 자식 요소에 flex-direction를 설정하여 표시되는 순서를 바꿀 수 있습니다.
... 이번에는 여기서 문제가 발생합니다.
아이 요소의 클래스가 3개 모두 order:順番を示す数字; 그래서, 지정하려면 어떻게 하면?
의사 클래스라는 편리한 것이 있다고 합니다. 그것을 사용해 본다.

css

.text:nth-child(1){
    order:2
}
.text:nth-child(2){
    order:3
}
.text:nth-child(3){
    order:1
}

이제 text 클래스의 표시 순서를 변경할 수있었습니다.
덧붙여서, 손자 요소에는 효과가없는 것 같기 때문에주의.

의사 클래스

방금 사용한 의사 클래스에 대해.

対象となる要素：nth-child(n)

이제 대상 요소 중 n 번째 요소를 지정할 수 있습니다. 클래스를 늘릴 때까지가 아닌 경우에 사용하면 좋을 것 같다.
덧붙여서 text 의 내용은 2n라든지로 짝수번째만으로 여러가지 조건 지정을 할 수 있다고 한다.
잘보고 싶을 때는 여기 (아래쪽에 참고로 한 사이트 전부의 하고 있습니다)

참고로 한 사이트

pointer-events 속성입니다 매우 편리하게! 클릭이나 호버의 타겟이되는 요소를 변경하는 기술
【Flexbox】 HTML의 기술을 바꾸지 않고 표시 순서를 바꾸는 CSS
요소의 순서를 바꿀 수 있는 flexbox의 order를 활용하자
CSS 공식 -flex-direction-
E:nth-child(n) 의사 클래스《전부터 n번째, 일정 간격 간격으로 지정》-CSS-