CSS Selectors

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)

This page will explain the most basic CSS selectors.

 

CSS 선택자들

 

CSS 선택자들은 당신이 스타일을 바꾸기 원하는 HTML 요소를 찾기 위해서 혹은 선택하기 위해서 사용되어진다.

 

우리는 CSS 선택자를 5가지 범주로 나눌수 있다.

 

  ● 단순한 선택자들 (이름이나 id, class 를 기초로 하는 요소들을 선택하기)

  ● 복잡한 선택자들 ( 이름, id, class를 사이에서 구체적인 관계를 기초로 요소를 선택하기 )

  ● 수도 클래스 선택자들 ( 어떤 상태를 기초로하는 요소들 선택하기 ) # pseudo 흔히 수도코드 할때 쓰이는 수도

  ● 수도 요소 선택자들 ( 요소의 한부분을 선택하거나 스타일하기 )

  ● 속성 선택자들 ( 속성이나 속성 값를 기초로 요소를 선택하기 )

 

이번 페이지에서는 가장 기초가 되는 CSS 선택자들을 설명할 것입니다.

 

The CSS element Selector

The element selector selects HTML elements based on the element name.

 

css 요소 선택자

 

The element selector 는 요소의 이름을 기초로 하는 HTML 선택합니다.

 

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.

 

Id 선택자

The id selector 는 구체적인 요소를 선택하기 위해 HTML의 요소의 속성을 사용합니다.

요소의 Id는 한 페이지안에서 특별하며(하나밖에 없다.)  , the id selector는 하나의 특별한 요소를 선택하기 위해 사용되어집니다.

구체적인 하나의 id를 선택하기 위해서 # 문자를 사용하고, # 문자 다음에 id가 따라옵니다.

 

 

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.

 

클래스 선택자

 

The class selector 는 구체적인 Class 속성의 요소를 선택합니다.

구체적인 Class 를 선택하기 위해선  '.' 문자를 사용하고 다음에 클래스의 이름이 따라옵니다.

 

 

 

The CSS Universal Selector

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

 

 

전체 선택자

The universal selector 는 해당 페이지의 모든 HTML 요소를 선택합니다.

 

 

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):

 

CSS 그룹 선택자

 

The grouping selector selects 는 같은 스타일로 정의되어있는 모든 HTML 요소를 선택합니다.

 

다음 따라오는 CSS 코드를 보십시오 ( h1, h2 p 요소는 같은 스타일의 정의를 가지고 있습니다. )

 

 

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

To group selectors, separate each selector with a comma.

 

group the selectors는 코드를 최소화 하는데도 더 좋아질수 있습니다.

그룹선택자를 하기 위해선 ',' (콤마) 로 각각의 요소를 구분합니다.