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
“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.
STEPS :
Step 1: Make the ul a flex container.
[pastacode lang=”css” manual=”ul%20%0A%7B%20display%3A%20flex%3B%20%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]Step 2: Reverse the order of siblings in the mark-up.
[pastacode lang=”markup” manual=”%3Cul%3E%0A%20%20%20%3Cli%3EB%3C%2Fli%3E%0A%20%20%20%3Cli%3EA%3C%2Fli%3E%0A%3C%2Ful%3E%0A” message=”html code” highlight=”” provider=”manual”/]Step 3: Use a sibling selector to target Element A (~ or + will do) .
[pastacode lang=”css” manual=”li%3Ahover%20%2B%20li%20%0A%7B%20%0Abackground-color%3A%20red%3B%20%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]Step 4: Use the flex order property to restore the order of siblings on the visual display.
[pastacode lang=”css” manual=”li%3Alast-child%20%0A%7B%20%0Aorder%3A%20-1%3B%20%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]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.
- You can also select the nth-child right-to-left:
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:
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:
- 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:
- The obvious way to style el2 where it occurs directly before el1 with that same delightful pink(ish) text colour.
HTML source:
[pastacode lang=”markup” manual=”%3Cdiv%3E%0A%3Clabel%20for%3D%22a%22%3E%0ALabel%20text%0A%3C%2Flabel%3E%0A%3Cinput%20type%3D%22checkbox%22%20name%3D%22a%22%20id%3D%22a%22%3E%0A%3C%2Fdiv%3E%0A” message=”html code” highlight=”” provider=”manual”/]- 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:
Good One