CSS selectors

      No Comments on CSS selectors

CSS selectors are used to target the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine grained precision when selecting elements to style.

CSS selectors-syntax

The basic syntax is :

selector 
{                     
 declaration;       //declaration block
}

CSS selectors

Types of CSS selectors

  • Tag selectors: The selectors that select the tag to style. For example consider
    p { color: #000; } . The property color will be applied to all &t;p> tags in the document.
  • Class selectors: Pinpoint selectors, used when we to need to style a specific element. For example as in above case, when we do not need to style all the <p> tags , but only some.Using class selectors same style can be applied to multiple elements.

    .class_1 { color:red; }
    <p class='class_1'>content...</p>
    <h2 class='class_1'>heading</h2>
    
  • Id selectors: They are similar to class selectors in function except of the fact that they are used only once per page.For example:

    #id_name1
    {
      color:red;
      padding:10px;
    }
    
  • Group selectors:Group selectors let multiple or group of elements have same style. For example:
     
    h1, p, a, h6  // for a group of elements
    { 
      color:yellow;
      font-size:19px;
    }
    
  • Universal selectors: Often there are certain style code, that need to be applied to all elements present on a web page. For example, we need to apply font-family:Arial to all elements. (*) or the universal selector selects each and every element on a web page.
    (*)
    {
      font-size:20px;
      font-family:Arial;
    }
    


PatternMeaningDescribed in section
*Matches any element.Universal
selector
EMatches any E element (i.e., an element of type E).Type
selectors
E FMatches any F element that is a descendant of
an E element.
Descendant
selectors
E > FMatches any F element that is a child of
an element E.
Child selectors
E:first-childMatches element E when E is the first
child of its parent.
The :first-child pseudo-class
E:link
E:visited
Matches element E if E is the source
anchor of a hyperlink of which the target is not yet visited (:link)
or already visited (:visited).
The link pseudo-classes
E:active
E:hover
E:focus
Matches E during certain
user actions.
The dynamic pseudo-classes
E:lang(c)Matches element of type E if it is in (human) language c
(the document language specifies how language is determined).
The :lang() pseudo-class
E + FMatches any F element immediately preceded by
a sibling element E.
Adjacent selectors
E[foo]Matches any E element with the
“foo” attribute set (whatever the value).
Attribute selectors
E[foo=”warning”]Matches any E element whose
“foo” attribute value is exactly equal to “warning”.
Attribute selectors
E[foo~=”warning”]Matches any E element whose
“foo” attribute value is a list of space-separated values, one of
which is exactly equal to “warning”.
Attribute selectors
E[lang|=”en”]Matches any E element whose
“lang” attribute has a hyphen-separated list of values
beginning (from the left) with “en”.
Attribute selectors
DIV.warningLanguage specific. (In HTML, the same
as DIV[class~=”warning”].)
Class selectors
E#myidMatches any E element with ID
equal to “myid”.
ID selectors

Leave a Reply

Your email address will not be published. Required fields are marked *