CSS Selectors introduction

Cascading Style Sheets work by allowing you to define rules that describe how you want your elements to appear on the page. Selectors are a way to locate elements on the page, and for CSS, that’s how it knows which elements to apply the style rules to. There are different types of selectors.

We have:

• Tag selector
• Class selector
• ID selector
• Attribute selectors,

Watch these videos:

Theory (summary)

Selectors can be divided into the following categories:

• Simple selectors: Match one or more elements based on element type, class, or id.
• Attribute selectors: Match one or more elements based on their attributes/attribute values.
• Pseudo-classes: Match one or more elements that exist in a certain state, such as an element that is being hovered over by the mouse pointer, or a checkbox that is currently disabled or checked, or an element that is the first child of its parent in the DOM tree.
• Pseudo-elements: Match one or more parts of content that are in a certain position in relation to an element, for example the first word of each paragraph, or generated content appearing just before an element.
• Combinators: These are not exactly selectors themselves, but ways of combining two or more selectors in useful ways for very specific selections. So for example, you could select only paragraphs that are direct descendants of divs, or paragraphs that come directly after headings.
• Multiple selectors: Again, these are not separate selectors; the idea is that you can put multiple selectors on the same CSS rule, separated by commas, to apply a single set of declarations to all the elements selected by those selectors.

Simple Selectors

This selector is just a case-insensitive match between the selector name and a given HTML element name. This is the simplest way to target all elements of a given type.

Class Selectors

The class selector consists of a dot, ‘.’, followed by a class name. A class name is any value, without spaces, placed within an HTML class attribute. It is up to you to choose a name for the class. It is also noteworthy that multiple elements in a document can have the same class value, and a single element can have multiple class names separated by white space. Here’s a quick example:

ID selectors

The ID selector consists of a hash symbol (#), followed by the ID name of a given element. Any element can have a unique ID name set with the id attribute. It is up to you to choose an ID name. It’s the most efficient way to select a single element.

Universal selector

The universal selector (*) is the ultimate joker. It allows selecting all elements on a page.

Attribute selector

Attribute selectors are a special kind of selector that will match elements based on their attributes and attribute values. Their generic syntax consists of square brackets ([]) containing an attribute name followed by an optional condition to match against the value of the attribute. 

These attribute selectors try to match an exact attribute value:

• [attr] : This selector will select all elements with the attribute attr, whatever its value.
• [attr=value] : This selector will select all elements with the attribute attr, but only if its value is value.
• [attr~=value]: This selector will select all elements with the attribute attr, but only if value is one of a space-separated list of words contained in attr’s value. 

Regular Expression-like attribute selectors

• [attr^=value] : This selector will select all elements with the attribute attr for which the value starts with value.
• [attr$=value] : This selector will select all elements with the attribute attr for which the value ends with value.

• [attr*=value] : This selector will select all elements with the attribute attr for which the value contains the substring value.

CSS pseudo selector

A CSS pseudo-class is a keyword added to the end of a selector, preceded by a colon (:), which is used to specify that you want to style the selected element but only when it is in a certain state. For example, you might want to style a link element only when it is being hovered over by the mouse pointer, or a checkbox when it is disabled or checked, or an element that is the first child of its parent in the DOM tree.

Combinators

Using one selector at a time is useful, but can be inefficient in some situations. CSS selectors become even more useful when you start combining them to perform fine-grained selections. 

• Selector list (,)
• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)

• general sibling selector (~)

Selector list

Example:All div – tags , and p -tags: 
div, p{    color: red;}

Descendant selector

Any element matching B that is a descendant of an element matching A (that is, a child, or a child of a child, etc.). the combinator is one or more spaces 

All <p> tags inside <div> tags

Example

div p {

    background-color: yellow;
}

<div>
    <p> p tag </p>
</div>

OR:

<div>
   <div>
    <p> p tag </p>
   </div>
</div>

Child selector

All <p>  tags who are a direct child of a  <div> tag:

Example

div > p { 

 background-color: yellow;

}

<div>
    <p> p tag </p>
</div>

adjacent sibling selector

Sibling = same parent
Adjacent = immediatly followed by 
All <p> – tags immediatly after a div tag:

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div+p {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div>
        <p>Paragraph 1 in the div.</p>
        <p>Paragraph 2 in the div.</p>
    </div>
    <p>Paragraph 3. Not in a div.</p>
    <p>Paragraph 4. Not in a div.</p>
</body>

</html>

general sibling selector

matches the second element if it is followed by a first element (not necessarily immediately), and both have the same parent.

<!DOCTYPE html>
<html>

<head>
    <style>
        div~p {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <p>Paragraph 1.</p>
    <div>
        <code>Some code.</code>
        <p>Paragraph 2.</p>
    </div>
    <p>Paragraph 3.</p>
    <code>Some code.</code>
    <section></section>
    <p>Paragraph 4.</p>
</body>

</html>

OUTPUT: