CSS

CSS stand for Cascading Style Sheets which is used for describing the looks or presentation of a markup document such as HTML or XML.

CSS SELECTORS

A CSS selector is the first/opening part of a CSS ruleset. It determines how we can apply styles to HTML elements on a web page.

There are many different CSS selectors, each with its unique syntax. The syntax tells the browser which HTML elements to apply CSS property values to on the web page.

The element or elements targeted by a CSS selector are the subject of the selector.

We can select a subject based on its element type, class, ID name, or pseudo-state. The syntax for CSS Selector is:

selector{
   CSS-property: value;
}

Types of CSS Selectors

Basic CSS selectors.
Advanced CSS selectors.

BASIC CSS SELECTORS

Basic CSS selectors are the most common type of CSS selectors. They style specific elements on a website. In basic selectors, we have selectors such as:

CSS Class Selectors
CSS ID Selectors
Element Type Selectors
CSS Universal Selectors

CSS Class Selector

The CSS class selector identifies an element based on its class attribute. We use CSS class selectors to style many and any HTML elements.

To select elements with a specific class, write a period (.) character, followed by the class name. The syntax for CSS Class Selector is:

.class-name {
   property: value;
}

Examples of CSS Class selector:

<p class="text">When will Indian cricket team win a world cup again?</p>

In the example above the <p> element has a class="text". To select the <p> element using the CSS class selector, we:

.text {
  text-align: center;
  color: orange;
  font-size: 20px;
}

See another example below

<h1>Football<h1>
<p class="code">When will Indian cricket team win a world cup again?</p>
<h2>Rejoice</h2>
<button class="code">Submit</button>

In the example above both the <p> and the <button> element have the same class="code". But what if we want to style only the <p> element. We'll do that as follows:

p.code {
    text-transform: capitalize;
    color: orange;
    font-size: 20px;
}

The CSS ID Selector

The CSS ID selector identifies an element based on its ID attribute. ID selectors are unique, hence apply to one unique HTML element. The syntax for ID selector is

#id-name {
   property: value;
}

In the example below, the <p> element has a id="coding"

<p id="coding">Politics is not a game</p>

To select the element <p> using the CSS id selector, we do

#coding {
    text-align: center;
    color: red;
}

Element type Selectors

Element Type Selectors are the most common basic CSS selectors. We select HTML elements based on the element name. The syntax for Element Type Selector is:

element {
   property: value;
}

Example of Element Type Selectors:

p {
   text-align: center;
   font-size: 20px;
   color: red;
}

The CSS Universal Selector

The asterisk (*) character represents Universal selectors. We use the universal selector (*) to select all HTML elements on the same web page.

Every HTML element, from the top to bottom, follows the universal selector's style. The syntax for Universal Selector is:

* {
   CSS-Property: value;
}

Example of CSS Universal Selector:

* {
   text-align: center;
   text-transform: Uppercase;
}

The CSS Grouping Selector

CSS grouping selectors select all the HTML elements with the same style definitions. CSS grouping selectors save time and help us write more specific codes.

We can target the several HTML elements with the same styles.

Let's say there are elements h1,h2,p and some other elements with class="text" and id="bold". We can styles all of them in using CSS selector, we separate each selector with a comma (,).

For example:

h1, h2, h3, .text, #bold
{
   background-color: red;
   color: white;
   font-weight: 700;
   font-size: 28px;
   text-align: center;
}

ADVANCED CSS SELECTORS

Advanced CSS selectors enables us to do more than what basic selectors allows us to do.

Types of Advanced CSS Selectors

Combination Selectors.
Pseudo-Class-Selectors.
CSS Attribute Selectors.

Combination Selectors

Combination Selectors select elements based on a specific relationship between them.

There are four types of combination selectors:

Descendant Selectors.
Child Selectors.
Adjacent Sibling Selectors.
General Sibling Selectors.

Descendant Selectors

Descendant selectors match all elements that are descendants of a specified element. Descendant selectors select the children, grand-children, etc, when used.

To select Descendants, use multiple selectors separated by spaces. The syntax for Descendant Selector is:

selector1  selector2 {
   property: value;
}

Lets assume that in an HTML code a <h2> element is descendant to an another element <article>. Than to target the <h2> element, we can simply write as:

article h2 {
    text-align: center;
    color: orange;
    font-size: 20px;
}

Child Selectors

Child selectors match an element that is an immediate child of another element.The Child Selectors select only the child elements.The child selector does not select the grandchildren elements like the Descendant selector.

We use the greater-than sign (>) character to represent a child selector. The syntax for Child Selector is:

Parent-selector > Child-selector {
    property: value;
}

Consider a HTML example where an element <p> is the direct child of element <section>. We'll do as :

section > p {
    text-align: center;
    color: orange;
    font-size: 20px;
}

What is the difference between a Descendant Selector and Child Selector?

The child selector ( > ) targets an element that is a child of its parent. It does not target descendants beyond the children.

The descendant selects all the children or grandchildren of a given element.

Adjacent Sibling Selectors

The Adjacent sibling selects an element directly after another specific element. Sibling elements must have the same parents. They must be immediately following each other.

The plus (+) character represents adjacent sibling selectors. The syntax for Adjacent sibling selector is:

first-sibling-selector + second-sibling-selector {
    property: value;
}

For example, in a HTML document if there are multiple <h2> and <p> elements which are siblings as well and are children of an element <article>. Therefore to select these two elements only where they comes together or are adjacent to each other,

we'll do as:

h2 + P {
     text-align: center;
     color: orange;
     font-size: 20px;
}

General sibling selectors

General sibling selectors select the elements that follow and share the same parent. It is not necessary that the second element immediately follows the first element.

The tilde (~) character represents general sibling selectors.

The syntax for the General sibling selector is:

first-sibling-selector ~ second-sibling-selector {
   property: value;
}

The first sibling element comes first.
The second sibling element comes second and is the targeted element. The targeted element is the element you intend to style.

Example of General sibling selector:

 <h2>Coding is Fun</h2>

  <article>

       <h2>Cess - The Frontend Web developer</h2>
        <img src="...." alt="...">
        <p>I will be working as a full-time frontend web developer by this time next year</p>

         <div>
            <h2>Coding is life</h2>
         </div>
  </article>

In the above example we'll only target only the <p> element as:

h2 ~ p {
     text-align: center;
     color: orange;
     font-size: 20px;
}

General sibling selector will operate when both sibling elements have the same parent.
As long as the siblings have the same parent, it doesn't matter if they are born immediately after each other.

CSS Attribute Selectors

Attribute selectors select all elements that have a given attribute or attribute value. An attribute is a piece of the markup language used to change how an HTML element behaves or displays.

Example:

<a href="https://www.fb.com_" target="_blank">Connect on Facebook</a>

In the example above target="_blank" is an attribute of the anchor tag.

selector[attribute] {
    property: value;
}

There are seven types of Attribute selectors:

Present Attribute Selector
Equals Attribute Selector
Begins With Attribute Selector (^)
Ends With Attribute Selector ($)
Contains Attribute Selector (*)
Attribute Spaced Attribute Selector (~)
Hyphen Attribute Selector (|)

Present Attribute Selector

Present attribute selector select elements with a specified attribute.

The syntax for Present Attribute Selector is:

selector[attribute] {
    property: value;
}

Example of Present attribute selector:

<a href="#" target="_blank">I love  to code</a>

Styling the above HTML code, we write as:

a[target] {
    color: orange;
    font-size: 20px;
}

The CSS styles above will work on any <a> element with a "target" attribute.

Equals Attribute Selector

Equals attribute selectors select elements with a specified attribute and value. The equals (=) character represents Equals attribute selectors.

The syntax for Equals Attribute Selector is:

selector[attribute="value"] {
   property: value;
}

Example of Equals attribute selector:

<a href="www.ineuron.ai" target="_blank">I love to code</a>

Styling the above HTML, we write as:

a[href="www.ineuron.ai"] {
    color: orange;
    font-size: 20px;
}

The example above will find any <a>' element with a 'href' attribute set to"ineuron.ai"` and apply the CSS styles to it.

Begins With Attribute Selector:

Begins with selector select elements whose attribute value begins with a specific value.We don't have to write down the whole word of the value we specify when using Begins with selector.

The circumflex accent (^) character represents Begins with selector.

The syntax for Begins with selector is:

selector[attribute^="value"] {
   property: value;
}

Example of Begins with attribute selector:

<a href="https://www.ineuron.ai" target="_blank">I love to code everyday</a>

Styling the above Html code:

a[href^="https://"] {
    color: orange;
    font-size: 20px;
}

The example above will find any <a> element with a href attribute that starts with "https://" and apply the CSS styles.

Ends With Attribute Selector:

Ends with selector select elements whose attribute value ends with a specific value.

The dollar sign ($) character represents Ends with selector. The syntax for Ends with selector is:

selector[attribute$="value"] {
   property: value;
}

Example:

<p><a href="https://www.ineuron.ai/docs/menu.pdf">Code documentation</a></p>

Styling the above ⬆️ Html code:

a[href$=".pdf"] {
    color: orange;
    font-size: 20px;
}

The example above ⬆️ will find any <a> element with a ''href'' attribute that ends with ".pdf" and apply the CSS styles.

Attribute spaced Selector:

Attribute spaced Selector is also called white space attribute selector. It matches any element whose attribute value is a list of space-separated values. One of the values we use will be equal to any value in the space-separated values.

By space-seperated values, we mean attribute values like class="fun coding".

The tilde (~) character represents the attribute spaced selector. The syntax for Attribute spaced selector is:

selector[attribute~="value"] {
   property: value;
}

Example of Attribute spaced selector:

<a href="#" rel="tag nofollow">Code documentation</a>

Styling the above ⬆️ Html code:

a[rel~="tag"] {
     color: orange;
     font-size: 20px;
}

The example above ⬆️ will find any <a> element with a ''rel'' attribute with a value of "tag" and apply the CSS styles to it.

Contains Attribute Selector:

Contains attribute selector select elements whose attribute value contains a specified value.

The asterisk (*) character represents Contains Attribute selector. The syntax for Contains Attribute selector is:

selector[attribute*="value"] {
   property: value;
}

Example:

<a href="/signin.com">Code documentation</a>

Styling the above ⬆️ Html code:

a[href*="signin"] {
     color: orange;
     font-size: 20px;
}

The CSS styles will work on any <a> element with a "href" attribute that contains a value of "signin".

Hyphen Attribute Selector:

Hyphen attribute-selector select elements with the specified attribute starting with the specified value.

It selects all elements whose attribute has a hyphen-seperated list of values.

The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text"!

The vertical line (|) character represents Hyphen Attribute Selector

The syntax for Hyphen Attribute Selector is:

selector[attribute|="value"] {
   property: value;
}

Example:

<a href="#" lang="en-US">Code documentation</a>

Styling the above ⬆️ Html code:

a[lang|="en"] {
     color: orange;
     font-size: 20px;
}

The CSS styles will work on any <a> element with a "lang" attribute that contains a value of "en".

It matches the elements with the lang attribute with the values en, en-US, en-GB and so on but not US-en, GB-en.

PSEUDO SELECTORS

There are two types of pseudo-selectors:

Pseudo Class Selectors.
Pseudo Element Selectors.

Pseudo Class Selectors

A pseudo-class is used to define a unique set of an element.

For example:

style an element when a user mouse over it.

style visited and unvisited links.

style an element when it focus.

The colon (:) character represents Pseudo class selectors. The syntax for Pseudo class selector is:

selector : pseudo-class {
   property: value;
}

There are three main types of Pseudo-class selectors:

User Action Pseudo-classes.
link Pseudo-classes.
Structural And Positional Pseudo-classes.

User Action Pseudo-classes

User Action Pseudo-classes work when the user interacts with your web page. The most used User Action Pseudo-classes are:

:hover

:active

:focus

:hover

:hover works when the user moves their cursor over an element but does not select it.

The syntax for :hover selector is:

selector :hover {
    property: value;
}

https://codepen.io/cesscode/pen/QWdaZYw

In the example above, the color of the link will change to red when you hover over the link.

:active

We use the :active selector to select and style active links.

A link becomes active when you click on it. The :active selector can be used on all elements, not only links.

The syntax for :active selector is:

selector :active {
    property: value;
}

:focus

The :focus selects an element that is being focused on by the user. "focused on by the user" means it accepts keyboard or any other user input.

It works on user input elements used in forms and is triggered when the user clicks on it.

The syntax for :focus selector is:

selector :focus {
   property: value;
}

https://codepen.io/cesscode/pen/OJWzBWB

In the example above, the background color of the input field changes to red.

Link Pseudo-classes

There are two link pseudo-classes:

:link
:visited

:link

Link Pseudo class selector selects a link that the user has not visited before.

The syntax for link selector is:

selector :link {
   property: value;
}

:visited

:visited selects a link that user has clicked on.

Use them to control the colors of the links and whether they appear underlined or not.

The syntax for :visited selector is:

:visited {
   property: value;
}

Structural And Positional Pseudo-classes

The most common structural and Positional Pseudo-classes are

:first-child
:last-child
:Only-child
:nth-child(n)

:first-child

The :first-child pseudo-class applies a style to the element's first child.

The syntax for :first-child selector is:

:first-child {
   property: value;
}

:last-child

The :last-child pseudo-class applies a style to an element if it is the last child within its parent.

The syntax for :last-child selector is:

:last-child {
   property: value;
}

https://codepen.io/cesscode/pen/NWaNqVx

In the above example:

li :first-child selects line 1 because this is first list item within the list.
li :last-child selects line 4 because this is last list item within the list.

:only-child

The :only-child pseudo-class applies a style to an element if it is the only element within a parent. The syntax for :only-child selector is:

:only-child {
   property: value;
}

Example:

<ul>
   <li>The first child will be red</li>
</ul>

Styling the above ⬆️ Html code:

li :only-child {
   background-color: red;
   color: white;
   padding: .7em;
}

The above ⬆️ CSS styles will apply background-color: red; to the <li> element cause is the only child.

:nth-child(n)

The :nth-child(n) selector matches every element that is the nth child of its parent.

n can be a number, a keyword (odd or even), or a formula (like an + b). The syntax for nth-child() selector is:

:nth-child(number) {
  css declarations;
}

Few examples to illustrate:

/* Selects the second element of div siblings */
div :nth-child(2) {
  background: red;
}

/* Selects the second li element in a list */
li :nth-child(2) {
  background: lightgreen;
}

/* Selects every third element among any group of siblings */
:nth-child(3) {
  background: yellow;
}

Generated Content Pseudo-elements

The generated pseudo-element consist of the:

::before pseudo-element
::after pseudo-element

::before Pseudo-element

The ::before pseudo-element adds content before the HTML element.

The syntax for ::before Pseudo element selector is:

selector::before {
   property: value;
}

::after Pseudo-element

The ::after pseudo-element adds content after the HTML element.

The syntax for ::after Pseudo element selector is:

selector ::after {
  property: value;
}

When using the ::after and ::before pseudo-elements we must use the content property to make your styles visible.

CSS Selectors

In this article we'll learn about some important CSS selectors.

Table of contents

CSS

CSS SELECTORS

Types of CSS Selectors

BASIC CSS SELECTORS

CSS Class Selector

The CSS ID Selector

Element type Selectors

The CSS Universal Selector

The CSS Grouping Selector

ADVANCED CSS SELECTORS

Combination Selectors

Descendant Selectors

Child Selectors

What is the difference between a Descendant Selector and Child Selector?

Adjacent Sibling Selectors

General sibling selectors

CSS Attribute Selectors

Present Attribute Selector

Equals Attribute Selector

Begins With Attribute Selector:

Ends With Attribute Selector:

Attribute spaced Selector:

Contains Attribute Selector:

Hyphen Attribute Selector:

PSEUDO SELECTORS

Pseudo Class Selectors

User Action Pseudo-classes

:hover

:active

:focus

Link Pseudo-classes

:link

:visited

Structural And Positional Pseudo-classes

:first-child

:last-child

:only-child

:nth-child(n)

Generated Content Pseudo-elements

::before Pseudo-element

::after Pseudo-element