Pseudo selectors & Attribute selectors & Combinators

Pseudo selectors

 

• P span {}
  P 태그 안의 span에 적용(부모자식관계)
• P + span {}
  P (바로)다음으로 오는 형제인 span만 적용(형제 관계)
• P ~ span {}
  P 다음으로 오는 span에 적용(바로 다음 아니어도 적용됌)

 

 

Attribute selectors

 

        input[type="password"] {

            background-color: thistle;

        }

 

• “name”을 포괄하는 모든 게 선택된다

        input[placehorder~="name"] {

            background: yellow;

        }

 

• 버튼 눌렀을 때

        button:active {

            background-color: red

        }

 

• 버튼위에 마우스 갖다 댔을 때

        button:hover {

            background-color: red;

        }

 

• 키보드로 선택되었을 때

        button:focus {

            background-color: red;

        }

        input:focus {

            background-color: red;

        }

 

 

• 방문했을 때
  a:visited {}
  
  
• form이 hover되면 바뀐다

        form:hover input {
            background:  aqua;
        }

 

 

• form이 hover 하면서 input도 선택되있어야 함

        form:hover input:focus {
            background:  aqua;
        }

 

• placeholder 꾸미는 법

 

        input::placeholder {
            color: mediumaquamarine;
        }

 

 

• selection 꾸미는 법

aksdjaskldjkalsdjlaskdjaslkdjaslkdjlksadjlsakdjaskldjsakldjsalkdjaslkdjaslkdjaslkdjaslkdjsalkdjaslkdjasldkaskldj

 

        p::selection {
            color: white;
            background-color: tomato;
        }