Explaining about CSS Selector

Cascading Style Sheets: A CSS selector is the part of a CSS rule set that actually selects the content you want to style.

CSS Syntax: A CSS rule-set consists of a selector and a declaration block:

Explaining about CSS Selector

• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
• A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
• In the following example all <p>elements will be center-aligned, with a red text color

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

“previous sibling” in CSS selector

• Cascading Style Sheets : A cascade is like a waterfall, there’s no backward motion. So, naturally, there is no previous sibling selector in CSS.
• However by using flexbox, a previous sibling selector can be simulated.
• The flex order property can move elements around the screen.
• The element A to turn red when element B is hovered.

<ul>
    <li>A</li>
    <li>B</li>
</ul>

STEPS :

Step 1: Make the ul a flex container.

ul 
{ display: flex; 
}

Step 2: Reverse the order of siblings in the mark-up.

<ul>
   <li>B</li>
   <li>A</li>
</ul>

Step 3: Use a sibling selector to target Element A (~ or + will do) .

li:hover + li 
{ 
background-color: red; 
}

Step 4: Use the flex order property to restore the order of siblings on the visual display.

li:last-child 
{ 
order: -1; 
}

Two Outdated Beliefs about CSS

• Flexbox is shattering long-held beliefs about CSS.
• A previous sibling selector is not possible in CSS
• If you know the exact position an :nth-child()-based exclusion of all following siblings would work.

ul li:not(:nth-child(n+3))

• You can also select the nth-child right-to-left:

ul li:nth-child(-n+2)

Previous sibling, the missing CSS selector

• A way to style all previous siblings (opposite of ~) that may work depending on what you need.
• Let’s say you have a list of links and when hovering on one, all the previous ones should turn red. You can do it like this:

/* default link color is blue */ 
.parent a { color: blue; } 
/* prev siblings should be red */ 
.parent:hover a { color: red; }
 .parent a:hover,
 .parent a:hover ~ a { color: blue; }

<div class="parent"> <a href="#">link</a> 
<a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> </div> 

Syntax idea :

• Since parent element > child element is used to select child elements with a specified parent and preceding element(s) ~ element is used to select elements that are preceded by a specified element.
• Using element < previous element would be a bad format as because of the > use it could be confused with referring to the parent element.
• The format would be element – previous element as it doesn’t seem to be in use and relates to use of the + symbol for “next”.

• CSS 2.1 has some really handy selectors, one of which is the adjacent (next) sibling selector which has the form:

el1 + el2
{
color:#f0f;
}

• The above would apply a tasty pink(ish) text colour to el2 where it directly follows el1 in HTML element order.
• The glaring omission (as far as i can see) in the CSS selectors currently available though is the exact opposite selector, previous-sibling which might perhaps have syntax:

el1 - el2
{
color:#f0f;
}

• The obvious way to style el2 where it occurs directly before el1 with that same delightful pink(ish) text colour.

label - input[type="checkbox"]
{
order:-1;
}

HTML source:

<div>
<label for="a">
Label text
</label>
<input type="checkbox" name="a" id="a">
</div>

• There is also currently a non-direct sibling selector which uses a tilde in place of the plus, the opposite of this could perhaps be:

el1 -~ el2
{
color:#f0f;
}