CSS SelectorsCSS Selectors

In CSS, selectors are patterns used to select the element(s) you want to style.

SelectorExampleExample description

.class

.introSelects all elements with class="intro"
.class1.class2.name1.name2Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2.name1 .name2Selects all elements with name2 that is a descendant of an element with name1
#id#firstnameSelects the element with id="firstname"
**Selects all elements
elementpSelects all <p> elements
element.classp.introSelects all <p> elements with class="intro"
element,elementdiv, pSelects all <div> elements and all <p> elements
element elementdiv pSelects all <p> elements inside <div> elements
element>elementdiv > pSelects all <p> elements where the parent is a <div> element
element+elementdiv + pSelects the first <p> element that is placed immediately after <div> elements
element1~element2p ~ ulSelects every <ul> element that is preceded by a <p> element
[attribute][target]Selects all elements with a target attribute
[attribute=value][target=_blank]Selects all elements with target="_blank"
[attribute~=value][title~=flower]Selects all elements with a title attribute containing the word "flower"
[attribute|=value][lang|=en]Selects all elements with a lang attribute value starting with "en"
[attribute^=value]a[href^="https"]Selects every <a> element whose href attribute value begins with "https"
[attribute$=value]a[href$=".pdf"]Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value]a[href*="w3schools"]Selects every <a> element whose href attribute value contains the substring "w3schools"
:activea:activeSelects the active link
::afterp::afterInsert something after the content of each <p> element
::beforep::beforeInsert something before the content of each <p> element
:checkedinput:checkedSelects every checked <input> element
:defaultinput:defaultSelects the default <input> element
:disabledinput:disabledSelects every disabled <input> element
:emptyp:emptySelects every <p> element that has no children (including text nodes)
:enabledinput:enabledSelects every enabled <input> element
:first-childp:first-childSelects every <p> element that is the first child of its parent
::first-letterp::first-letterSelects the first letter of every <p> element
::first-linep::first-lineSelects the first line of every <p> element
:first-of-typep:first-of-typeSelects every <p> element that is the first <p> element of its parent
:focusinput:focusSelects the input element which has focus
:fullscreen:fullscreenSelects the element that is in full-screen mode
:hovera:hoverSelects links on mouse over
:in-rangeinput:in-rangeSelects input elements with a value within a specified range
:indeterminateinput:indeterminateSelects input elements that are in an indeterminate state
:invalidinput:invalidSelects all input elements with an invalid value
:lang(language)p:lang(it)Selects every <p> element with a lang attribute equal to "it" (Italian)
:last-childp:last-childSelects every <p> element 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
::marker::markerSelects the markers of list items
: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
::placeholderinput::placeholderSelects input elements with the "placeholder" attribute specified
:read-onlyinput:read-onlySelects input elements with the "readonly" attribute specified
:read-writeinput:read-writeSelects input elements with the "readonly" attribute NOT specified
:requiredinput:requiredSelects input elements with the "required" attribute specified
:root:rootSelects the document`s root element
::selection::selectionSelects the portion of an element that is selected by a user
: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

 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

https://css-tricks.com/almanac/selectors/


Comments for CSS Selectors

Comments

.com

Be the first to comment




Ние се грижим за вашите данни и ще използваме бисквитки само за да подобрим вашето преживяване.
OK OKOK, но с тъмна тема темаНе желая Декларация за поверителност
!
Сигурни ли сте, че искате да изчистите списъка с любими?
ДАНЕ