CSS 선택자

💡

ID Selector Select elements with an ID #id Selects the element with a specific id. You can also combine the ID selector with the type selector. Examples #cool selects any element with id="cool"

💡

Descendant Selector Select an element inside another element A B Selects all B inside of A. B is called a descendant because it is inside of another element. Examples p strong selects all

💡

Class Selector Select elements by their class .classname The class selector selects all elements with that class attribute. Elements can only have one ID, but many classes. Examples .neato selects all elements with class="neato"

💡

Combine the Class Selector A.className You can combine the class selector with other selectors, like the type selector. Examples ul.important selects all ul elements that have class="important"

💡

The Universal Selector You can select everything! * You can select all elements with the universal selector! Examples p * selects any element inside all p elements.

💡

Adjacent Sibling Selector Select an element that directly follows another element A + B This selects all B elements that directly follow A. Elements that follow one another are called siblings. They're on the same level, or depth. In the HTML markup for this level, elements that have the same indentation are siblings. Examples p + .intro selects every element with

💡

General Sibling Selector Select elements that follows another element A ~ B You can select all siblings of an element that follow it. This is like the Adjacent Selector (A + B) except it gets all of the following elements instead of one. Examples A ~ B selects all B that follow a A

💡

Child Selector Select direct children of an element A > B You can select elements that are direct children of other elements. A child element is any element that is nested directly in another element. Elements that are nested deeper than that are called descendant elements. Examples A > B selects all B that are a direct children A

💡

First Child Pseudo-selector Select a first child element inside of another element :first-child You can select the first child element. A child element is any element that is directly nested in another element. You can combine this pseudo-selector with other selectors. Examples :first-child selects all first child elements.

💡

Only Child Pseudo-selector Select an element that are the only element inside of another one. :only-child You can select any element that is the only element inside of another one. Examples span:only-child selects the span elements that are the only child of some other element.

Uploaded by Notion2Tistory v1.1.0