Learn CSS Selector :

Basic Selectors :

*
⚊ Universal Selector

'*' is a Universal Or Wildcard selector. It chooses all of the elements and applies CSS properties.

* {

  color: green;

}

<body>
    <p>content...</p>
    <span>content1...</span>
    <code>content2...</code>
    <p>content...</p>
</body> 

Universal Selector[*] :

.
⚊ Class Selector

The CSS class selector checks elements based on the contents of their class. Choose an element that has a class.

.menu {

  color: green;

}

<div>
  <nav class="menu">
    <ul>
     <li><a href="#">content</a></li>
    </ul>
  </nav>
</div> 
⚊ Type Selector

The element selectors choose the elements by the element name or a list of element names and then use CSS properties for the chosen elements.

p, span, code {

  color: green;

}

<body>
    <p>content...</p>
    <span>content1...</span>
    <code>content2...</code>
    <div>content3...</div>
</body> 

Type Selector :

#
⚊ ID Selector

The CSS class selector checks elements founded on the contents of their class. Select an element that has a class.

#heading {

  color: green;

}

<div class="banner">
    <h1 id="heading">Heading..</h1>
    <p>content1..</p>
    <span>content2..</span>
</div> 

Attribute Selectors :

⚊ Attribute Selector

This selector represents an element with an "attribute name" attribute, whatever the value of the attribute.

a[target] {

  color: green;

}

<body>
  <a target="_blank"> 
    Content... 
  </a>
</body> 
⚊ [attributename~="value"] selector

This selector means an element with the "attribute name" attribute whose value is a whitespace-separated list of terms, one of which is exactly "value".

If "value" contains whitespace, it will never represent anything (since the words are separated by spaces).

If "value" is the empty string, it will never represent anything.

h2[class~="title"] {

  font-size: 1.2rem;

}

<body>
    <h2 class="title"> 
      Content... 
    </h2>
    <h2 class="titleColors"> 
      Content1..
    </h2>
</body> 
⚊ [attributename|=value] Selector

This selector means an element with the "attribute name" attribute, its value either being exactly "value" or beginning with "value" immediately followed by "-".

This is mainly intended to allow language subcode matches.

p[class|= text] {

  font-style: italic;

}

<body>
    <p class="text-small">
      Content...
    </p>
    <p class="text-down">
      Content1..
    </p>
</body> 
⚊ [attributename*="value"] Selector

This selector means an element with the "attribute name" attribute whose value contains at least one instance of the substring "value".

If "value" is the empty string, then the selector does not convey anything.

h3[class*="title"]{

  font-size: 1.rem;

  color: green;

}

<body>
  <h3 class="title"> 
      Content... 
  </h3>
  <h3 class="title"> 
      Content1... 
  </h3>
</body> 
⚊ [attributename="value"] Selector

This selector represents an element with the "attributename" attribute whose value is exactly "value".

There needs to be a matching class in the HTML:

a[class="exam"] {

  font-size: 15px;

}

<body>
  <a class="exam"> 
    Content... 
  </a>
</body> 
⚊ [attributename^=value] Selector

This selector represents an element with the "attribute name" attribute whose value begins with the prefix "value".

If "value" is the empty string then the selector does not represent anything

span[class^="content"]{

  color: green;

  font-size: 1.5em;

}

<body>
  <span class="content"> 
      Content... 
  </span>
  <span class="content-right"> 
      Content1... 
  </span>
</body> 
⚊ [attributename$="value"] Selector

This selector means an element with the "attribute name" attribute whose value ends with the suffix "value".

If "value" is the empty string, then the selector does not convey anything.

[class*="test"] {

  font-size: 15px;

  color : red;

}

<body>
  <span class="test"> 
      Content... 
  </span>
  <span class="test-demo"> 
      Content1... 
  </span>
</body> 

Pseudo Elements :

::
⚊ first-line element

The ::first-line selector is utilized to add a style to the foremost line of the specified selector.

p::first-line {

  font-style: italic;

}

<body>
  <p> demo ... </p>
</body> 
::
⚊ selection element

::selection represents the text chosen by the user in the associated element.

div::selection {

  color : green;

}

<body>
  <div> Content... </div>
</body> 
::
⚊ before element

::before selects the content rendered from CSS, and the generated content is before the associated element.

div::before {

  content : " ";

  color : green;

  font-size : 5px;

}

<body>
  <div> demo .... </div>
</body> 
::
⚊ first-letter element

::first-letter selects the first letter of the associated element and uses CSS properties.

p::first-letter {

  font-size : 5px;

}

<body>
  <p> demo .... </p>
</body> 
::
⚊ after element

::after selects the content generated from CSS, the rendered content is after the associated element.

div::after {

  content:"?";

}

<body>
  <div> Content... </div>
</body> 
::
⚊ placeholder element

::placeholder pseudo element chooses the input elements that have placeholder attribute.

input::placeholder {

  color : green;

}

<body>
  <input type="text" placeholder="First name">
</body> 

Input Pseudo Elements :

:
⚊ disabled element

:disabled pseudo class chooses the input element that stands disabled by the disabled attribute.

input:disabled {

  color : blue;

}

<body>
    <input type="text" 
        name="abc" disabled>
</body> 
:
⚊ checked element

:checked chooses the input elements already checked or checked by the user.

input:checked {

  height:20px;

  width:15px;

}

<body>
    <input type="text" 
        name="abc" checked>
</body> 
:
⚊ placeholder-shown element

:placeholder-shown pseudo class chooses the elements that have placeholder attribute

input:placeholder-shown {

  font-size :15px;

}

<body>
    <input type="text" 
        placeholder="Fname">
</body> 
:
⚊ required element

:required pseudo-class chooses the input element that requires information necessarily.

input:required {

  border: 1px solid gray;

  width : 10px;

  height : 9px;

}

<body>
    <input type="name" 
        value="xyz" required>
</body> 
:
⚊ enabled element

:enabled chooses the input elements that are enabled, and input elements are enabled by default.

input:enabled {

  border-radius : 5px;

  outline : none;

  color : blue;

}

<body>
    <input type="text" 
        name="abc">
</body> 
:
⚊ read-only element

:read-only pseudo-class chooses the input elements that contain read-only attributes.

input:read-only {

  color : blue;

  font-size: 10px;

}

<body>
  <input type="text" 
      value="abc" read-only>
</body> 
:
⚊ out-of-range element

:out-of-range pseudo-class chooses the input element where the value is out of coverage.

input:out-of-range {

  color : gray;

}

<body>
  <input type="number" 
      min= "90" max= "450">
</body> 

User Action Pseudo Classes :

:
⚊ link element

:link element chooses and applies CSS properties to all of the hyperlinks.

a {

  color : blue;

  text-decoration : underline;

}

<body>
    <a href="...."target="_blank"> 
        Content... 
    </a>
</body> 
:
⚊ visited element

:visited applies CSS properties to the hyperlink which has already been visited.

a:visited {

  color : gray;

}

<body>
    <a href="...." target="_blank"> 
        Content... 
    </a>
</body>
:
⚊ hover element

:hover applies CSS properties to the hyperlink at the time mouse hover over the link.

a:hover {

  border-radius : 5px;

  color : blue;

}

<body>
    <a href="...." target="_blank"> 
        Content... 
    </a>
</body> 
:
⚊ active element

:active pseudo-class applies CSS properties to the hyperlink within the involved duration (the time between mouse clicking and releasing).

a:active {

  color : blue;

}

<body>
    <a> href="...." target="_blank" < 
        Content... 
    /a>
</body> 

Structural Pseudo Classes :

:
⚊ First-Child Pseudo Selector

The :first-child pseudo-class describes an element that is the first child of some other element. Same as :nth-child(1).

div > p:first-child {

  color : green;

}

<body>
 <div class="content">
  <p>content..</p>
 </div>
 <p> content..</p>
 <span> content..</span>
 <p> content..</p>
</body> 

First-Child Pseudo Selector :

:
⚊ Last-Child Pseudo Selector

The :last-child pseudo-class defines an element that is the last child of some other element. Same as :nth-last-child(1).

ul > li:last-child {

  color : green;

}

<body>
  <ul>
    <li>content..</li>
    <li>content1..</li>
    <li>content2..</li>
    <li>content3..</li>
  </ul>
</body> 

Last-Child Pseudo Selector :

:
⚊ Only-Child Pseudo Selector

The :only-child pseudo-class defines an element that has a parent element and whose parent element has no other element, children. Identical as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.

div span:only-child {

  color : green;

}

<body>
  <div>
    <span>content..</span>
    <p>content1..</p>
    <span>content2..</span>
    <p>content3..</p>
  </div>
</body> 

Only-Child Pseudo Selector :

:
⚊ Nth-Of-Type(E) Pseudo Selector

:nth-last-child(E) selects the child element in agreement with the value of an expression (E) that considers the element's position from the end.

div p:nth-of-type(2) {

  color : green;

}

<body>
  <div>
    <p>content..</p>
    <p>content1..</p>
    <p>content2..</p>
  </div>
</body> 

Nth-Of-Type(E) Pseudo Selector :

:
⚊ Nth-Last-Of-Type(N) Pseudo Selector

:nth-last-of-type(E) selects the child of a distinct type of element in accordance with the value of expression (E) that evaluates to the role of element from the end. In this case, parent has more than one kinds of elements.

div p:nth-last-of-type(2) {

  color : green;

}

<body>
  <div>
    <p>content..</p>
    <p>content1..</p>
    <p>content2..</p>
    <p>content3..</p>
  </div>
</body> 

Nth-Last-Of-Type(N) Pseudo Selector :

:
⚊ Nth-Child(E) Pseudo Selector

:nth-child(E) selects the child element in agreement with the value of an expression (E) that assesses the position of the element from the start.

li:nth-child(2) {

  color : green;

}

<body>
 <ul>
  <li>content..</li>
  <li>content1..</li>
  <li>content2..</li>
  <li>content3..</li>
 </ul>
</body> 

Nth-Child(E) Pseudo Selector :

:
⚊ Nth-Last-Child(E) Pseudo Selector

:nth-last-child(E) selects the child element in agreement with the value of an expression (E) that assesses to the standing of element from the end.

p:nth-last-child(3) {

  color : green;

}

<body>
 <div>
    <p>content..</p>
    <p>content1..</p>
    <p>content2..</p>
    <p>content3..</p>
 </div>
</body> 

Nth-Last-Child(E) Pseudo Selector :

:
⚊ First-Of-Type Pseudo Selector

:first-of-type selects the first child of a distinct type of element. In this case, the parent has more than one kind of element.

dl dd:first-of-type {

  color : green;

}

<body>
  <caption>Heading..</caption>
  <dl>
    <dt>content..</dt>
    <dd>content1..</dd>
    <dt>content2..</dt>
    <dd>content1..</dd>
  </dl>
</body> 

First-Of-Type Pseudo Selector :

:
⚊ Last-Of-Type Pseudo Selector

The :last-of-type pseudo-class defines an element that is the final sibling of its type in the list of children of its parent element. Same as :nth-last-of-type(1).

p:last-of-type {

  color : green;

}

<body>
  <div>
    <p>content..</p>
    <p>content1..</p>
    <p>content2..</p>
    <p>content3..</p>
  </div>
</body> 

Last-Of-Type Pseudo Selector :

Combinators :

⚊ Descendent combinator

The descendent combinator selects and applies CSS properties to the arbitrary child element.

div p {

  color : blue;

  text-decoration : underline;

}

<body>
 <div> demo... </div>
 <div>
   <code>
    <p> demo... </p>
   </code>
 <div>
</body> 
⚊ Next-sibling combinator ('+')

'+' combinator chooses and applies CSS properties to the next nearest element of the current element.

p+code {

  color : gray;

  font-size : 10px;

  font-style : italic;

}

<body>
  <code> demo... </code>
  <p> demo... </p>
</body> 
⚊ Child combinator ('>')

The child combinator selects and applies CSS properties to the child element.

ul > li {

  border: 1px solid gray;

  color : blue;

  padding : 3px;

}

<body>
 <ul>
    <li> demo... </li>
    <li> demo... </li>
 </ul>
</body> 
⚊ Following combinator ('~')

'~' combinator chooses and applies CSS properties to the next element of the present element.

code ~ p {

  font-size : 15px;

  color : blue;

  font-family : sans-serif;

}

<body>
  <code> demo... </code>
  <p> demo... </p>
</body>