ABOUT ME

-

  • 1. Selector
    Front-end/CSS3 2020. 6. 6. 15:56
    /*셀렉터 {프로퍼티: 값; 프로퍼티: 값}*/
    h1 { color: red; }
    p  { color: blue; }
    
    
    /*복수개의 셀렉터를 연속하여 지정 가능*/
    h1, p { color: red; }
    
    
    /*전체 셀렉터, HTML 문서 내의 모든 요소를 선택한다. head 요소도 포함된다.*/
    * { color: red; }
    
    
    /*태그 셀렉터. 지정한 태그명을 가지는 요소를 선택한다.*/
    /*ex) <p></p>로 선택된 모든 요소들이 포함된다.*/
    p { color: red; }
    
    
    /*ID 셀렉터. 중복될 수 없는 id 어트리뷰트 값을 지정하고 일치하는 요소를 선택한다.*/
    /*<p id="p1">paragraph 1</p>*/
    /*<p id="p2">paragraph 2</p>*/
    /*이때에 paragraph 1 만 빨간색으로 표시된다.*/
    #p1 { color: red; }
    
    
    /*클래스 셀렉터*/
    /*<div class="container">*/
        /*<p id="p1">paragraph 1</p>*/
        /*<p id="p2">paragraph 2</p>*/
    /*</div>*/
    .container { color: red; }
    /*아래 항목을 추가해주면 p2는 container 의 자식요소이지만 개별 설정 가능하다.*/
    #p2 { color: initial; }
    /*class 어트리뷰트 값은 공백으로 구분하여 여러개를 지정할 수 있기때문에 아래와 같이 클래스 셀렉터로*/
    /*미리 스타일을 정의해두고 사용할 수 있다. 아래 항목들을 클래스 이름으로 사용해주면 된다.*/
    /* class 어트리뷰트 값이 text-center 인 모든 요소를 선택 */
    .text-center { text-align: center; }
    /* class 어트리뷰트 값이 text-large 인 모든 요소를 선택 */
    .text-large  { font-size: 200%; }
    /* class 어트리뷰트 값이 text-red 인 모든 요소를 선택 */
    .text-red    { color: red; }
    /* class 어트리뷰트 값이 text-blue 인 모든 요소를 선택 */
    .text-blue   { color: blue; }
    
    
    /*어트리뷰트 셀렉터 : 지정된 어트리뷰트를 갖는 모든 요소를 선택한다.*/
    /*셀렉터[어트리뷰트]의 형식*/
    /*<a href="http://www.poiemaweb.com">poiemaweb.com</a><br>*/
    /*<a href="http://www.google.com" target="_blank">google.com</a><br>*/
    /*<a href="http://www.naver.com" target="_top">naver.com</a>*/
    /*a 의 요소중에 href 어트리뷰트를 갖는 모든 요소*/
    a[href] { color: red; }
    /*지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트의 값이 일치하는 모든 요소를 선택한다.*/
    /*a 의 요소중에 target 어트리뷰트의 값이 "_blank"인 모든 요소*/
    a[target="_blank"] { color: red; }
    /*<h1 title="heading first">Heading first</h1>*/
    /*<h1 title="heading-first">Heading-first</h1>*/
    /*<h1 title="heading second">Heading second</h1>*/
    /*<h1 title="heading third">Heading third</h1>*/
    /*지정된 어트리뷰트의 값이 ""로 지정된 값을 공백으로 분리된 단어로 포함하는 요소를 선택한다.*/
    /*h1 의 요소중에 title 어트리뷰트 값에 "first"를 단어로 포함하는 요소*/
    /*위의 예제에서는 Heading first 만 해당한다.*/
    h1[title~="first"] { color: red; }
    /*<p lang="en">Hello!</p>*/
    /*<p lang="en-us">Hi!</p>*/
    /*<p lang="en-gb">Ello!</p>*/
    /*<p lang="us">Hi!</p>*/
    /*<p lang="no">Hei!</p>*/
    /*지정된 어트리뷰트의 값과 일치하거나 연이은 "-" (하이픈)으로 시작하는 요소를 선택한다.*/
    /*p의 요소중에 lang 어트리뷰트의 값이 "en"이거나 "en-"으로 시작하는 요소*/
    p[lang|="en"] { color: red; }
    /*<a href="https://www.test.com">https://www.test.com</a><br>*/
    /*<a href="http://www.test.com">http://www.test.com</a>*/
    /*지정된 어트리뷰트 값으로 시작하는 요소를 선택한다.*/
    a[href^="https://"] { color: red; }
    /*<a href="test.html">test.html</a><br>*/
    /*<a href="test.jsp">test.jsp</a>*/
    /*지정된 어트리뷰트 값으로 끝나는 요소를 선택한다.*/
    a[href$=".html"] { color: red; }
    /*<div class="first_test">The first div element.</div>*/
    /*<div class="second">The second div element.</div>*/
    /*<div class="test">The third div element.</div>*/
    /*<p class="test">This is some text in a paragraph.</p>*/
    /*지정된 어트리뷰트 값을 포함하는 요소를 선택한다.*/
    /*위의 예제에서는 첫번째와 세번째 문장만 포함된다. (마지막은 셀렉터가 P)*/
    div[class*="test"] { color: red; }
    div[class~="test"] { background-color: yellow; }
    
    
    /*복합셀렉터*/
    /*후손셀렉터*/
    /*<div>*/
        /*<p>paragraph 1</p>*/
        /*<p>paragraph 2</p>*/
        /*<span><p>paragraph 3</p></span>*/
    /*<p>paragraph 4</p>*/
    /*div 요소의 후손 요소 중 p 요소*/
    /*위의 예제에서는 1, 2, 3이 해당됨.*/
    div p { color: red; }
    /*자식셀렉터*/
    /*div 요소의 자식 요소 중 p 요소*/
    /*위의 예제에서는 1, 2만 해당이 됨. 3의 div 의 자식은 span 임.*/
    div > p { color: red; }
    /*인접 형제 셀렉터*/
    /*셀렉터A의 형제요소 중 셀렉터A 바로 뒤에 있는 셀렉터B를 선택. A와 B사이에 다른 요소가 존재하면 선택x*/
    p + ul { color: red; }
    /*일반 형제 셀렉터*/
    /*셀렉터A의 형제 요소중 셀렉터A 뒤에 위치하는 모든 셀렉터B 요소를 선택한다.*/
    p ~ ul { color: red; }
    
    
    /*가상 클래스 셀렉터*/
    /*마우스가 올라와 있거나 링크를 방문했었거나 포커스가 들어와 있을때 다른 스타일을 적용하는 것*/
    /*<a href="#">Hover me</a><br><br>*/
    /*<input type="text" placeholder="focus me">*/
    /*a 요소가 hover 상태일 때*/
    a:hover { color: red; }
    /*input 요소가 focus 상태일 때*/
    input:focus { background-color: yellow; }
    
    
    /*링크 셀렉터*/
    /*<a href="#" target="_blank">This is a link</a><br>*/
    /*<input type="text" value="I'll be red when focused"><br>*/
    /*<input type="password" value="I'll be red when focused">*/
    /* a 요소가 방문하지 않은 링크일 때 */
    a:link { color: orange; }
    /* a 요소가 방문한 링크일 때 */
    a:visited { color: green; }
    /* a 요소에 마우스가 올라와 있을 때 */
    a:hover { font-weight: bold; }
    /* a 요소가 클릭된 상태일 때 */
    a:active { color: blue; }
    /* text input 요소와 password input 요소에 포커스가 들어와 있을 때 */
    input[type=text]:focus, input[type=password]:focus { color: red; }
    
    
    /*UI 요소 상태 셀렉터*/
    /*<input type="radio" checked="checked" value="male" name="gender"> <span>Male</span><br>*/
    /*<input type="radio" value="female" name="gender"> <span>Female</span><br>*/
    /*<input type="radio" value="neuter" name="gender" disabled> <span>Neuter</span><hr>*/
    /*<input type="checkbox" checked="checked" value="bicycle"> <span>I have a bicycle</span><br>*/
    /*<input type="checkbox" value="car"> <span>I have a car</span><br>*/
    /*<input type="checkbox" value="motorcycle" disabled> <span>I have a motorcycle</span>*/
    /* input 요소가 사용 가능한 상태일 때,
           input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */
    /*input 요소 다음에 형제요소로 각기 모두다 span 요소가 나오기 때문에 "+"를 사용함.(span 만 선택됨)*/
    input:enabled + span { color: blue; }
    /* input 요소가 사용 불가능한 상태일 때,
       input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */
    input:disabled + span {
        color: gray;
        text-decoration: line-through; }
    /* input 요소가 체크 상태일 때,
       input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */
    input:checked + span { color: red; }
    
    
    /*구조 가상 클래스 셀렉터*/
    /*들여쓰기가 된 자식 요소만 해당된다.*/
    /* p 요소 중에서 첫번째 자식을 선택 */
    p:first-child { color: red; }
    /* p 요소 중에서 마지막 자식을 선택 */
    p:last-child { color: blue; }
    /*셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택한다.*/
    p:nth-child(n) { color: orange; }
    /*셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택한다.*/
    p:nth-last-child(n) { color: green; }
    
    /* ol 요소의 자식 요소인 li 요소 중에서 짝수번째 요소만을 선택 */
    ol > li:nth-child(2n)   { color: orange; }
    /* ol 요소의 자식 요소인 li 요소 중에서 홀수번째 요소만을 선택 */
    ol > li:nth-child(2n+1) { color: green; }
    /* ol 요소의 자식 요소인 li 요소 중에서 첫번쨰 요소만을 선택 */
    ol > li:first-child     { color: red; }
    /* ol 요소의 자식 요소인 li 요소 중에서 마지막 요소만을 선택 */
    ol > li:last-child      { color: blue; }
    /* ol 요소의 자식 요소인 li 요소 중에서 4번째 요소 요소만을 선택 */
    ol > li:nth-child(4)    { background: brown; }
    /* ul 요소의 모든 자식 요소 중에서 뒤에서부터 시작하여 홀수번째 요소만을 선택 */
    ul > :nth-last-child(2n+1) { color: red; }
    /* ul 요소의 모든 자식 요소 중에서 뒤에서부터 시작하여 짝수번째 요소만을 선택 */
    ul > :nth-last-child(2n)   { color: blue; }
    
    /* p 요소의 부모 요소의 자식 요소 중 첫번째 등장하는 p 요소 */
    p:first-of-type  { color: red; }
    /* p 요소의 부모 요소의 자식 요소 중 마지막 등장하는 p 요소 */
    p:last-of-type   { color: blue; }
    /* p 요소의 부모 요소의 자식 요소 중 앞에서 2번째에 등장하는 p 요소 */
    p:nth-of-type(2) { color: green; }
    /* p 요소의 부모 요소의 자식 요소 중 뒤에서 2번째에 등장하는 p 요소 */
    p:nth-last-of-type(2) { color: orange;}
    /* p 요소 중에서 첫번째 자식을 선택 */
    p:first-child { background: brown;}
    
    
    /*부정 셀렉터*/
    /*<input type="text" value="Text input">*/
    /*<input type="email" value="email input">*/
    /*<input type="password" value="Password input">*/
    /* input 요소 중에서 type 어트리뷰트의 값이 password 가 아닌 요소를 선택 */
    input:not([type=password]) { background: yellow; }
    
    /*가상 요소 셀렉터*/
    /*가상 요소에는 두개의 콜론을 사용함.*/
    /* p 요소 콘텐츠의 첫글자를 선택 */
    p::first-letter { font-size: 3em; }
    /* p 요소 콘텐츠의 첫줄을 선택 */
    p::first-line { color: red; }
    /* h1 요소 콘텐츠의 앞 공간에 content 어트리뷰트 값을 삽입한다 */
    h1::before {
        content: " HTML!!! ";
        color: blue; }
    /* h1 요소 콘텐츠의 뒷 공간에 content 어트리뷰트 값을 삽입한다 */
    h1::after {
        content: " CSS3!!!";
        color: red; }
    /* 드래그한 콘텐츠를 선택한다 */
    ::selection {
        color: red;
        background: yellow; }

    'Front-end > CSS3' 카테고리의 다른 글

    6. Font & Text  (0) 2020.06.06
    5. Background  (0) 2020.06.06
    4. Display  (0) 2020.06.06
    3. Box Model  (0) 2020.06.06
    2. Units  (0) 2020.06.06

    댓글

Designed by Tistory.