Article On Css Selectors

CSS Selectors are the elements that are used to define the elements you want to design with CSS. There are many different types of CSS Selectors, each with its own unique syntax. These tell the browser which elements to apply CSS property values.

Note: There are no selectors or combinators to select parent items, siblings of parents, or children of parent siblings.

A CSS Syntax rule consists of a selector, property as well as its value. The selector points to the HTML element where CSS style is to be applied. The CSS property is separated by semicolons. It is a combination of selector names followed by the property.

Syntax:

selector { Property: value; }

Basic Selectors

• Universal Selectors

The universal selector provided by CSS helps in choosing any elements within the HTML page. It goes with a single element and uses the asterisk (i.e., "") symbol used for denoting the selector as a universal selector. The is used for selecting all elements. This asterisk also has the capability to select all elements that are inside another element.

Code snippet of how to implement:

/* Selects all elements */

* {
     margin : 0px;
     padding : 0px;
  }

In the above example. All HTML elements will have 0px padding and margins, and it will overwrite default padding and margins with all HTML elements.

The universal selector becomes helpful when you wish to put a specific style in all the HTML elements within your web page. It can also be used for every single element that is within the element of your HTML page.

• Type selector

A Type Selector (sometimes referred to as an Element Type Selector) matches elements with the corresponding element node name, such as span, p and div tags. Type selectors are generally used to make “broad stroke” changes to the style of a site. It selects all elements that have the given node name.

p { /* "p" is the type selector */
  margin: 1em 1em 1em 0;
}

Often times Type Selectors are set as defaults, such as in a CSS reset where the intention is to override the browser defaults. An example from the first line of normalize.css, a popular CSS reset

article, aside, details, figcaption, figure, footer, header, 
main, nav, section, summary {
    display: block;
}

• Class Selector

It selects all elements that have the given class attributes. Class selectors are your friend. They are probably the most useful and versatile selectors out there. In part because you can add multiple classes (just separated by a space) on HTML elements.

<div class="module"></div>

<aside class="country module iceland"></aside>

.module {

color: "orange"

}

• ID selector

ID selectors are the most powerful type of selector in terms of CSS specificity. Meaning that they beat out other types of selectors and the styles defined within a win. It selects an element based on the value of its id attribute.

<div id="happy-cake"></div>
<aside id="happy-cake"></aside>

#happy-cake {

}

• Attribute Selector

You might argue that attribute selectors are even more useful than classes because they have the same specificity value, but can be any attribute, not just class, plus they can have a value you can select by. It selects all elements that have the given attribute.

/* <a> elements with an href matching "https://example.org" */

a[href="https://example.org"] {
  color: green;
}

Grouping Selectors

Grouping Selectors are used for selecting the multiple elements together to apply the common styling properties to them. For this reason, it helps to reduce the length of the code that has multiple selectors with the same properties. This makes code very easy to read. We can group them and write like this & we need the comma(,) to group the various selectors or to reduce the size of style sheets, one can group selectors in comma-separated lists.

h1, p {
 padding: 5px;
 color: grey;
}

• Pseudo Selector

Pseudo-classes-

Pseudo-class selectors are CSS selectors with a colon preceding them. You are probably very familiar with a few of them. Like hover:

a:hover {
  /* Yep, hover is a pseudo class */
}

/* Any button over which the user's pointer is hovering */

button:hover {
  color: blue;
}

• Pseudo-Elements

A CSS pseudo-element is a keyword added to a selector that lets you to style a specific part of the selected elements.

The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:

div::before {
  content: "before";
}
div::after {
  content: "after";
}

<div>
  before
  <!-- Rest of stuff inside the div -->
  after
</div>

: vs ::

Every browser that supports the double colon (::) CSS3 syntax also supports just the (:) syntax, but Internet Explorer (IE) 8 only supports the single-colon, so for now, it’s recommended to just use the single-colon for best browser support.

:: is the newer format intended to distinguish pseudo content from pseudo-selectors. If you don’t need IE 8 support, feel free to use the double-colon.