CSS selectors

CSS selectors are used to select elements in HTML document and to add some styles. While writing styles three most important CSS selectors, and they are class selectors, id selectors and element selectors. And next there are compound selectors and group selectors and these are used to select specific elements is a document. There are some pseudo selectors like visited, active, hover, first-child, last-child and lot of other.

CSS Class Selector

CSS class selector is used to select classes in html document and apply some styles. Class selector is noted by dot in front of class name. If the class name is content, then we will use class selector as below :

HTML will be

<div class="content">

</div>

CSS will be, Inside curly braces you can add styles.

.content {}

CSS ID Selector

CSS ID Selector is used to select ID’s in HTML document and to add some styles. ID selector is denoted by hash symbol in-front of ID name. If the ID is wrapper then id selector will be as below :

HTML will be

<div id="wrapper">

</div>

ID selector will be, inside curly braces you can add styles.

#wrapper{}

CSS Element Selector

CSS Element Selector is used select HTML elements in any document, Element selector are denoted by html tags. If you have paragraph tag or span tag, you can directly write styles to that tag.

element{}

Descendant selector

Descendant selector is used to select an element inside an element. If you have paragraph tag inside an div tag, you target that paragraph tag inside tag without effecting others using this Descendant selector.

HTML Code is

<div>
     <p></p>
</div>

For selecting that paragraph inside div tag, we can use this below Descendant selector code :

div p{}

Grouped Selector

Grouped Selector is used to combine similar styles into one single class. If you want to apply same css rules for two or three classes, id’s or element’s, then you can group them. You can group descendant selectors also. Here is an example code :

div, p, span, a {}

* Selector

The star symbol will target every single element on the page. Many developers will use this trick to zero out the margins and padding.

* {
 margin: 0;
 padding: 0;
}

Anchor Pseudo-classes

Anchor Pseudo-classes are used to select different states of an anchor link. Four different states of anchor links are link, hove, active, visited. For writing an anchor link

a:link {color:#HEXCODE;}      /* unvisited link */
a:visited {color:#HEXCODE;}   /* visited link */
a:hover {color:#HEXCODE;}     /* mouse over link */
a:active {color:#HEXCODE;}    /* selected link */

Other CSS Selectors

  • ::after Insert content after an element
  • ::before Insert content before the content of an element
  • :checked input:checked Selects every checked <input> element
  • :disabled input:disabled Selects every disabled <input> element
  • :enabled input:enabled Selects every enabled <input> element
  • :focus input:focus Selects the input element which has focus
  • :in-range input:in-range Selects input elements with a value within a specified range
  • :invalid input:invalid Selects all input elemets with an invalid value
  • :optional Selects input elements with no “required” attribute
  • :out-of-range input:out-of-range Selects input elements with a value outside a specified range
  • :read-only input:read-only Selects input elements with the “readonly” attribute specified
  • :read-write input:read-write Selects input elements with the “readonly” attribute NOT specified
  • :required input:required Selects input elements with the “required” attribute specified
  • :valid input:valid Selects all input elements with a valid value
  • :empty p:empty Selects every <p> element that has no children (including text nodes)
  • :first-child li:first-child Selects every <li> element that is the first child of its parent
  • :last-child li:last-child Selects every <li> element that is the last child of its parent
  • ::first-letter p::first-letter Selects the first letter of every <p> element
  • ::first-line p::first-line Selects the first line of every <p> element
  • :first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
  • :last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
  • :only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
  • :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-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
  • :only-child p:only-child Selects every <p> element that is the only child of its parent

Vivek Vengala
 

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.

Click Here to Leave a Comment Below 0 comments

Leave a Reply:

x

Join My Facebook Group to Receive Coding Tutorial for Free

email-subsribe