DEV Community

A K I L A N
A K I L A N

Posted on

Day -14 (new property)

selector in css

  • selector are used to find (or select) the html elemnts you want to style

simple selectors

(name , id ,class)

  1. ## combinator slectors
    • select elements based on sepecific relationship between them ,to contain more than one selector. Between the selectors, we can include a combinator

There are four different combinators in CSS:

Descendant combinator (space)

  • Matches all elements that are descendants(children,grandchildern,etc.) of a sepcified elemnt 
div p {
  background-color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

Child combinator (>)

  • The child combinator selects all elements that are direct children of a sepecficed element. 
div > p {
  background-color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

Next sibling combinator (+)

  • The + combinator is used to select an element that is directly after a specific element. 
div + p {
  background-color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

Subsequent-sibling combinator (~)

  • The ~ combinator selects all elements that are next siblings of a specified element. 
div ~ p {
  background-color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

Pseudo-class selector

s (select elements based on a certain state)

  • this is a keyword that can be added to selector ,to define a style for special state of sn element.

Interactive pseudo-classes

apply styles based on user interaction:

:hover - When mouse is over an element
:focus - When an element has focus (chnage the input box color while clicking on it)
:active - When an element is being activated( this is chnage the coloe while clicking a link)
:link - Unvisited links ( this set the background color in the link we can see normaly)
:visited - Visited links ( this change the color of the link one time you have clicked)

Structural pseudo-classes

select elements based on their position in the document tree:

:first-child - First child of a parent
:last-child- Last child of a parent
:nth-child(n) - The nth child of a parent
:lang() - Elements with a specific language (is like a class) we should add lang in element.

Pseudo-elements selectors

(select and style a part of an element)

  • keyword that can be added to a selector, to style a specific part of an element.

Text Pseudo-elements

Text pseudo-elements style specific parts of text content:

::first-line - Style the first line of text(is used to style the first line of a block-level element.)
::first-letter- Style the first letter of text ( is used to style the first letter of a block-level element.)

Content Pseudo-elements

Content pseudo-elements insert or style generated content:

::before- Insert content before an element( a content is added before the other content inside.)
::after - Insert content after an element ( a content is added after the other content inside.)
::marker - Style list item markers (is used to style the list item marker.)
::selection - Style user-selected text(is used to style the part of a text that is selected by a user. while trying to copy the color will change)
::backdrop- Style dialog backdrop(is used to style the viewbox behind a dialog box or popover element.)

Attribute selectors

(select elements based on an attribute or attribute value)

  • attribute selectors are used to select and style HTML elements with a specific attribute or attribute value, or both

  • [attribute]- Select elements with the specified attribute

  • [attribute="value"]- Select elements with a specific attribute and an exact value

  • [attribute~="value"] - Select elements with an attribute value containing a specific word

Top comments (0)