CSS Basics Web development basics

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 :

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.

  • Id selectors: They are similar to class selectors in function except of the fact that they are used only once per page.For example:

  • Group selectors:Group selectors let multiple or group of elements have same style. For example:
  • 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.


Pattern Meaning Described in section
* Matches any element. Universal
selector
E Matches any E element (i.e., an element of type E). Type
selectors
E F Matches any F element that is a descendant of
an E element.
Descendant
selectors
E > F Matches any F element that is a child of
an element E.
Child selectors
E:first-child Matches 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 + F Matches 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.warning Language specific. (In HTML, the same
as DIV[class~=”warning”].)
Class selectors
E#myid Matches any E element with ID
equal to “myid”.
ID selectors