CSS Selectors and explanation

Last Updated : |  

Css selectors are used to address them in various ways. If you assign a selector in HTML, you can use stylesheet to access it. So you can style any elements as you like and develop your own style from them.


SelectorExplanation
.classnameSelects all elements with class="classname"
.class1.class2Selects all elements with both class1 and class2 set within its class attribute
.class1 .class2Selects all elements with class2 that is a descendant of an element with class1
#idnameSelects the element with id="idname"
*Selects all elements
pSelects all <p> elements
p.classSelects all <p> elements with class="intro"
div, pSelects all <div> elements and all <p> elements
div pSelects all <p> elements inside <div> elements
div > pSelects all <p> elements where the parent is a <div> element
div + pSelects all <p> elements that are placed immediately after <div> elements
p ~ ulSelects every <ul> element that are preceded by a <p> element
[target]Selects all elements with a target attribute
[target=_blank]Selects all elements with target="_blank"
[title~=flower]Selects all elements with a title attribute containing the word "flower"
[lang|=en]Selects all elements with a lang attribute value starting with "en"
a[href^="https"]Selects every <a> element whose href attribute value begins with "https"
a[href$=".pdf"]Selects every <a> element whose href attribute value ends with ".pdf"
a[href*="tnado"]Selects every <a> element whose href attribute value contains the substring "w3schools"
a:activeSelects the active link
a:hoverSelects links on mouse over
a:visitedSelects all visited links
a:linkSelects all unvisited links
p::afterInsert something after the content of each <p> element
p::beforeInsert something before the content of each <p> element
p:first-childSelects every <p> element that is the first child of its parent
p::first-letterSelects the first letter of every <p> element
p::first-lineSelects the first line of every <p> element
p:first-of-typeSelects every <p> element that is the first <p> element of its parent
p:lang(it)Selects every <p> element with a lang attribute equal to "it" (Italian)
p:last-childSelects every <p> element that is the last child of its parent
p:last-of-typeSelects every <p> element that is the last <p> element of its parent
:not(p)Selects every element that is not a <p> element
p:nth-child(2)Selects every <p> element that is the second child of its parent
p:nth-last-child(2)Selects every <p> element that is the second child of its parent, counting from the last child
p:nth-last-of-type(2)Selects every <p> element that is the second <p> element of its parent, counting from the last child
p:nth-of-type(2)Selects every <p> element that is the second <p> element of its parent
p:only-of-typeSelects every <p> element that is the only <p> element of its parent
p:only-childSelects every <p> element that is the only child of its parent
p:emptySelects every <p> element that has no children (including text nodes)
input:focusSelects the input element which has focus
input:in-rangeSelects input elements with a value within a specified range
input:indeterminateSelects input elements that are in an indeterminate state
input:checkedSelects every checked <input> element
input:defaultSelects the default <input> element
input:disabledSelects every disabled <input> element
input:enabledSelects every enabled <input> element
input:invalidSelects all input elements with an invalid value
input:optionalSelects input elements with no "required" attribute
input:out-of-rangeSelects input elements with a value outside a specified range
input::placeholderSelects input elements with the "placeholder" attribute specified
input:read-onlySelects input elements with the "readonly" attribute specified
input:read-writeSelects input elements with the "readonly" attribute NOT specified
input:requiredSelects input elements with the "required" attribute specified
input:read-onlySelects input elements with the "readonly" attribute specified
input:validSelects all input elements with a valid value
:rootSelects the document's root element
::selectionSelects the portion of an element that is selected by a user
#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)

This is the list of all CSS selectors. I will show you how to use some of them and then it should actually be relatively understandable. The above in the table are only examples, you can use the CSS Selectors all on various HTML tags.



Examples of use CSS selectors

For example, CSS selectors such as after or before can be used on almost all elements and are very useful to carry out rework for improvement or to set empty spaces. However, something has to be observed with them, because if they have no content they will not be used and will not work. So here is a small demonstration.



// CSS CODE
     0  .classname::after {  1      content: '';  2      display: block;  3      /* Here you can do more, e.g. write a picture or something in the content attribute, this content attribute is important to display it even if it is empty. */  4  } 


    // HTML CODE
       0  <div class="classname">  1  Any content  2  </div> 


      I'd rather be avoided to be used often, instead use body classes and name them recognizable so that you don't get mixed up.



      Additional information

      To code object-oriented with CSS Selectors you can also use LESS or SASS, then everything would be much clearer. But you should use this if you have some experience with CSS selectors yourself.

      So if you need more examples just write a comment and subscribe to one of our social networks to support us. We would also be happy to share the article and you can do this immediately below on the respective network.

      Advertising
      Advertising

      Your Comment

      * This fields are required, email don't publish
      ?

      This field is optional
      Fill this field link your name to your website.

      Data entered in this contact form will be stored in our system to ensure the output of the comment. Your e-mail address will be saved to determine the number of comments and for registration in the future

      I have read the Privacy policy and Terms. I Confirm the submission of the form and the submission of my data.
      tnado © 2020 | All Rights Reserved
      In cooperation with Hyperly