본문 바로가기

Web Progreming

[ CSS ] CSS Selectors

CSS Selectors 이다. 자꾸 사용 할 일이 생기는데 맨날 까먹고 찾는데 시간 보내고 한다.

필요한거, 자주 쓰는거 몇개는 외우도락 하자!

출처는 W3School 이다.

CSS Selectors


SelectorExampleExample descriptionCSS
.class.introSelects all elements with class="intro"1
#id#firstnameSelects the element with id="firstname"1
**Selects all elements2
elementpSelects all <p> elements1
element,elementdiv,pSelects all <div> elements and all <p> elements1
element elementdiv pSelects all <p> elements inside <div> elements1
element>elementdiv>pSelects all <p> elements where the parent is a <div> element2
element+elementdiv+pSelects all <p> elements that are placed immediately after <div> elements2
[attribute][target]Selects all elements with a target attribute2
[attribute=value][target=_blank]Selects all elements with target="_blank"2
[attribute~=value][title~=flower]Selects all elements with a title attribute containing the word "flower"2
[attribute|=value][lang|=en]Selects all elements with a lang attribute value starting with "en"2
:linka:linkSelects all unvisited links1
:visiteda:visitedSelects all visited links1
:activea:activeSelects the active link1
:hovera:hoverSelects links on mouse over1
:focusinput:focusSelects the input element which has focus2
:first-letterp:first-letterSelects the first letter of every <p> element1
:first-linep:first-lineSelects the first line of every <p> element1
:first-childp:first-childSelects every <p> element that is the first child of its parent2
:beforep:beforeInsert content before  the content of every <p> element2
:afterp:afterInsert content after every <p> element2
:lang(language)p:lang(it)Selects every <p> element with a lang attribute value starting with "it"2
element1~element2p~ulSelects every <ul> element that are preceded by a <p> element3
[attribute^=value]a[src^="https"]Selects every <a> element whose src attribute value begins with "https"3
[attribute$=value]a[src$=".pdf"]Selects every <a> element whose src attribute value ends with ".pdf"3
[attribute*=value]a[src*="w3schools"]Selects every <a> element whose src attribute value contains the substring "w3schools"3
:first-of-typep:first-of-typeSelects every <p> element that is the first <p> element of its parent3
:last-of-typep:last-of-typeSelects every <p> element that is the last <p> element of its parent3
:only-of-typep:only-of-typeSelects every <p> element that is the only <p> element of its parent3
:only-childp:only-childSelects every <p> element that is the only child of its parent3
:nth-child(n)p:nth-child(2)Selects every <p> element that is the second child of its parent3
:nth-last-child(n)p:nth-last-child(2)Selects every <p> element that is the second child of its parent, counting from the last child3
:nth-of-type(n)p:nth-of-type(2)Selects every <p> element that is the second <p> element of its parent3
:nth-last-of-type(n)p:nth-last-of-type(2)Selects every <p> element that is the second <p> element of its parent, counting from the last child3
:last-childp:last-childSelects every <p> element that is the last child of its parent3
:root:rootSelects the document’s root element3
:emptyp:emptySelects every <p> element that has no children (including text nodes)3
:target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)3
:enabledinput:enabledSelects every enabled <input> element3
:disabledinput:disabledSelects every disabled <input> element3
:checkedinput:checkedSelects every checked <input> element3
:not(selector):not(p)Selects every element that is not a <p> element3
::selection::selectionSelects the portion of an element that is selected by a user3