CSS selectors

CSS selectors are very necessary if you are working as a web application developer, ui/ux designer or any other role where CSS is required. In this article we will take a look at a documents which is well crafted in MDN but beautifully present here with more examples and guidelines for usage purposes.

What is CSS selectors ?

A CSS selectors is a pattern of elements that communicate with browser that which HTML elements should be selected to have the CSS property values inside the rule applied to them. In short, CSS selectors set rules for HTML elements for visual / style purpose.

Type of CSS selectors

1. Basic selectors

i. Universal selector: Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.
Syntax: * .
Example: * will match all the elements of the document. Here we have set value as zero to all properties so that deafualt browser settings can be avoided.

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

ii. Type selector: Selects all elements that have the given node name.
Syntax: elementname.
Example: input will match any element. or, h1 will match any h1 elements.

h1{
  color: #fff;
  letter-spacing: 1px;
}

input{
    background-color: #c8cdd1;
    height: 5px;
    width: 125px;
}

iii. Class selector: Selects all elements that have the given class attribute.
Syntax: ".classname".
Example: .nav-button will match any element that has a class of "nav-button".

.nav-button{
    margin-top: 35px;
    margin-right: 85px;
    padding:8px 35px;
    background-color: #fff;
    border-radius: 10px;
    font-size: 20px;
}

iv. ID selector: Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.
Syntax: "#idname".
Example: #nav-button will match any element that has a id name of "nav-button".

#nav-button{
    margin-top: 35px;
    margin-right: 85px;
    padding:8px 35px;
    background-color: #fff;
    border-radius: 10px;
    font-size: 20px;
}

v. Attribute selector: Selects all elements that have the given attribute.
Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr=value]
**Example:* Set a background color on all elements that have a class attribute value containing "test":

[class*="test"] {
  background: #ffff00;
}

2. Grouping selectors

Selector list: The , selector is a grouping method that selects all the matching nodes.
Syntax: div, span, class. id etc. elements
Example: div, span will match both <span> and <div> elements .

nav div img{
    width: 100px;
    margin-top: 25px;
    margin-left:65px; 
}

3. Combinators

i. Descendant combinator: The " " (space) combinator selects nodes that are descendants of the first element.
Syntax: A B
Example: div span will match all <span> elements that are inside a <div> element.

div span{
    color: #fff;
    text-decoration: none;
}

ii. Child combinator: The > combinator selects nodes that are direct children of the first element.
Syntax: A > B
Example: ul > li will match all <li> elements that are nested directly inside a <ul> element.

ul > li{
    border: 2px solid #1d1d1d;
    background-color: #f5f5dc;
}

iii. General sibling combinator: The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.
Syntax: A ~ B
Example: p ~ span will match all <span> elements that follow a <p>, immediately or not.

p ~ span {
  color: red;
}

iv. Adjacent sibling combinator: The + combinator matches the second element only if it immediately follows the first element.
Syntax: A + B
Example: h2 + p will match the first <p> element that immediately follow an <h2> element.

h2+ p {
  font-weight: bold;
}

v. Column combinator Experimental: The || combinator selects nodes which belong to a column.
Syntax: A || B
Example: col || td will match all <td> elements that belong to the scope of the <col>.

/* Table cells that belong to the "selected" column */
col.selected || td {
  background: gray;
}

4. Pseudo*

i. Pseudo classes: The : pseudo allow the selection of elements based on state information that is not contained in the document tree.
Syntax:

selector:pseudo-class {
  property: value;
}

Example: a:visited will match all <a> elements that have been visited by the user.

button:hover {
  color: blue;
}

ii. Pseudo elements: The :: pseudo represent entities that are not included in HTML.
Syntax:

selector::pseudo-element {
  property: value;
}

Example: p::first-line will match the first line of all <p> elements.

p::first-line {
  color: blue;
  text-transform: uppercase;
}

If you want to know more on Pseudo classes and elements, please checkout my another article here.

Reference taken from MDN documents