콘텐츠로 건너뛰기

css selector

  • 기준

css 선택자 종류

Simple selectors: select elements based on name, id, class

The CSS element Selector

선택자로 요소를 선택하는 방법이다.

Example

Here, all <p> elements on the page will be center-aligned, with a red text color:

p {
  text-align: center;
  color: red;
}

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example

The CSS rule below will be applied to the HTML element with id=”para1″:

#para1 {
  text-align: center;
  color: red;
}

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

example

In this example all HTML elements with class=”center” will be red and center-aligned:

.center {
  text-align: center;
  color: red;
}

You can also specify that only specific HTML elements should be affected by a class.

exapmle

In this example only <p> elements with class=”center” will be red and center-aligned:

p.center {
  text-align: center;
  color: red;
}

HTML elements can also refer to more than one class.

example

  • In this example the <p> element will be styled according to class=”center” and to class=”large”:
  • <p class="center large">This paragraph refers to two classes.</p>

    The CSS Universal Selector

    The universal selector (*) selects all HTML elements on the page.

    example

    The CSS rule below will affect every HTML element on the page:

    * {
      text-align: center;
      color: blue;
    }

    The CSS Grouping Selector

    The grouping selector selects all the HTML elements with the same style definitions.

    Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

    h1 {
      text-align: center;
      color: red;
    }
    
    h2 {
      text-align: center;
      color: red;
    }
    
    p {
      text-align: center;
      color: red;
    }

    It will be better to group the selectors, to minimize the code.

    To group selectors, separate each selector with a comma.

    Example

    In this example we have grouped the selectors from the code above:

    h1, h2, p {
      text-align: center;
      color: red;
    }

    Combinator selectors: select elements based on a specific relationship between them

    Descendant Selector

    The descendant selector matches all elements that are descendants of a specified element.

    The following example selects all <p> elements inside <div> elements:

    Example

    div p {
      background-color: yellow;
    }

    Child Selector (>)

    The child selector selects all elements that are the children of a specified element.

    The following example selects all <p> elements that are children of a <div> element:

    Example

    div > p {
      background-color: yellow;
    }

    Adjacent Sibling Selector (+)

    The adjacent sibling selector is used to select an element that is directly after another specific element.

    Sibling elements must have the same parent element, and “adjacent” means “immediately following”.

    The following example selects the first <p> element that are placed immediately after <div> elements:

    Example

    div + p {
      background-color: yellow;
    }

    General Sibling Selector (~)

    The general sibling selector selects all elements that are next siblings of a specified element.

    The following example selects all <p> elements that are next siblings of <div> elements:

    Example

    div ~ p {
      background-color: yellow;
    }

    CSS Pseudo-classes

    Anchor Pseudo-classes

    Links can be displayed in different ways:

    Example

    /* unvisited link */
    a:link {
      color: #FF0000;
    }
    
    /* visited link */
    a:visited {
      color: #00FF00;
    }
    
    /* mouse over link */
    a:hover {
      color: #FF00FF;
    }
    
    /* selected link */
    a:active {
      color: #0000FF;
    }

    Pseudo-classes and HTML Classes

    Pseudo-classes can be combined with HTML classes:

    When you hover over the link in the example, it will change color:

    Example

    a.highlight:hover {
      color: #ff0000;
    }

    Hover on <div>

    An example of using the :hover pseudo-class on a <div> element:

    Example

    div:hover {
      background-color: blue;
    }

    Simple Tooltip Hover

    Hover over a <div> element to show a <p> element (like a tooltip):

    Hover over me to show the <p> element.

    Example

    p {
      display: none;
      background-color: yellow;
      padding: 20px;
    }
    
    div:hover p {
      display: block;
    }

    CSS – The :first-child Pseudo-class

    The :first-child pseudo-class matches a specified element that is the first child of another element.

    Match the first <p> element

    In the following example, the selector matches any <p> element that is the first child of any element:

    Example

    p:first-child {
      color: blue;
    }

    Match all <i> elements in all first child <p> elements

    In the following example, the selector matches the first <i> element in all <p> elements:

    Example

    p:first-child i {
      color: blue;
    }

    CSS – The :lang Pseudo-class

    The :lang pseudo-class allows you to define special rules for different languages.

    In the example below, :lang defines the quotation marks for <q> elements with lang=”no”:

    Example

    <html>
    <head>
    <style>
    q:lang(no) {
      quotes: "~" "~";
    }
    </style>
    </head>
    <body>
    
    <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
    
    </body>
    </html>

    All CSS Pseudo Classes

    SelectorExampleExample description
    :activea:activeSelects the active link
    :checkedinput:checkedSelects every checked <input> element
    :disabledinput:disabledSelects every disabled <input> element
    :emptyp:emptySelects every <p> element that has no children
    :enabledinput:enabledSelects every enabled <input> element
    :first-childp:first-childSelects every <p> elements that is the first child of its parent
    :first-of-typep:first-of-typeSelects every <p> element that is the first <p> element of its parent
    :focusinput:focusSelects the <input> element that has focus
    :hovera:hoverSelects links on mouse over
    :in-rangeinput:in-rangeSelects <input> elements with a value within a specified range
    :invalidinput:invalidSelects all <input> elements with an invalid value
    :lang(language)p:lang(it)Selects every <p> element with a lang attribute value starting with “it”
    :last-childp:last-childSelects every <p> elements that is the last child of its parent
    :last-of-typep:last-of-typeSelects every <p> element that is the last <p> element of its parent
    :linka:linkSelects all unvisited links
    :not(selector):not(p)Selects every element that is not a <p> element
    :nth-child(n)p:nth-child(2)Selects every <p> element that is the second child of its parent
    :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 child
    :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 child
    :nth-of-type(n)p:nth-of-type(2)Selects every <p> element that is the second <p> element of its parent
    :only-of-typep:only-of-typeSelects every <p> element that is the only <p> element of its parent
    :only-childp:only-childSelects every <p> element that is the only child of its parent
    :optionalinput:optionalSelects <input> elements with no “required” attribute
    :out-of-rangeinput:out-of-rangeSelects <input> elements with a value outside a specified range
    :read-onlyinput:read-onlySelects <input> elements with a “readonly” attribute specified
    :read-writeinput:read-writeSelects <input> elements with no “readonly” attribute
    :requiredinput:requiredSelects <input> elements with a “required” attribute specified
    :rootrootSelects the document’s root element
    :target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)
    :validinput:validSelects all <input> elements with a valid value
    :visiteda:visitedSelects all visited links

    CSS Pseudo-elements

    Syntax

    The syntax of pseudo-elements:

    selector::pseudo-element {
      property: value;
    }

    The ::first-line Pseudo-element

    The ::first-line pseudo-element is used to add a special style to the first line of a text.

    The following example formats the first line of the text in all <p> elements:

    Example

    p::first-line {
      color: #ff0000;
      font-variant: small-caps;
    }

    Note: The ::first-line pseudo-element can only be applied to block-level elements.

    The following properties apply to the ::first-line pseudo-element:

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear
  • Notice the double colon notation – ::first-line versus :first-line

    The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

    The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.

    For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.

    The ::first-letter Pseudo-element

    The ::first-letter pseudo-element is used to add a special style to the first letter of a text.

    The following example formats the first letter of the text in all <p> elements:

    Example

    p::first-letter {
      color: #ff0000;
      font-size: xx-large;
    }

    Note: The ::first-letter pseudo-element can only be applied to block-level elements.

    The following properties apply to the ::first-letter pseudo- element:

  • font properties
  • color properties
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if “float” is “none”)
  • text-transform
  • line-height
  • float
  • clear
  • Pseudo-elements and HTML Classes

    Pseudo-elements can be combined with HTML classes:

    Example

    p.intro::first-letter {
      color: #ff0000;
      font-size: 200%;
    }

    The example above will display the first letter of paragraphs with class=”intro”, in red and in a larger size.

    Multiple Pseudo-elements

    Several pseudo-elements can also be combined.

    In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:

    Example

    p::first-letter {
      color: #ff0000;
      font-size: xx-large;
    }
    
    p::first-line {
      color: #0000ff;
      font-variant: small-caps;
    }

    CSS – The ::before Pseudo-element

    The ::before pseudo-element can be used to insert some content before the content of an element.

    The following example inserts an image before the content of each <h1> element:

    Example

    h1::before {
      content: url(smiley.gif);
    }

    CSS – The ::after Pseudo-element

    The ::after pseudo-element can be used to insert some content after the content of an element.

    The following example inserts an image after the content of each <h1> element:

    Example

    h1::after {
      content: url(smiley.gif);
    }

    CSS – The ::marker Pseudo-element

    The ::marker pseudo-element selects the markers of list items.

    The following example styles the markers of list items:

    Example

    ::marker {
      color: red;
      font-size: 23px;
    }

    CSS – The ::selection Pseudo-element

    The ::selection pseudo-element matches the portion of an element that is selected by a user.

    The following CSS properties can be applied to ::selection: color, background, cursor, and outline.

    The following example makes the selected text red on a yellow background:

    Example

    ::selection {
      color: red;
      background: yellow;
    }

    All CSS Pseudo Elements

    SlectorExampleExample description
    ::afterp::afterInsert content after every <p> element
    ::beforep::beforeInsert content before every <p> element
    ::first-letterp::first-letterSelects the first letter of every <p> element
    ::first-linep::first-lineSelects the first line of every <p> element
    ::marker::markerSelects the markers of list items
    ::selectionp::selectionSelects the portion of an element that is selected by a user

    답글 남기기

    이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다