Explaining about CSS Selector

Cascading Style Sheets: 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
[pastacode lang=”css” manual=”%7B%0A%20%20%20%20color%3A%20red%3B%0A%20%20%20%20text-align%3A%20center%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/] [ad type=”banner”]

“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.
[pastacode lang=”markup” manual=”%3Cul%3E%0A%20%20%20%20%3Cli%3EA%3C%2Fli%3E%0A%20%20%20%20%3Cli%3EB%3C%2Fli%3E%0A%3C%2Ful%3E%0A” message=”html code” highlight=”” provider=”manual”/]


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.
[pastacode lang=”css” manual=”ul%20li%3Anot(%3Anth-child(n%2B3))%0A” message=”css code” highlight=”” provider=”manual”/]
  • You can also select the nth-child right-to-left:
[pastacode lang=”css” manual=”ul%20li%3Anth-child(-n%2B2)%0A” message=”css code” highlight=”” provider=”manual”/] [ad type=”banner”]

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:
[pastacode lang=”css” manual=”%2F*%20default%20link%20color%20is%20blue%20*%2F%20%0A.parent%20a%20%7B%20color%3A%20blue%3B%20%7D%20%0A%2F*%20prev%20siblings%20should%20be%20red%20*%2F%20%0A.parent%3Ahover%20a%20%7B%20color%3A%20red%3B%20%7D%0A%20.parent%20a%3Ahover%2C%0A%20.parent%20a%3Ahover%20~%20a%20%7B%20color%3A%20blue%3B%20%7D%0A%0A%3Cdiv%20class%3D%22parent%22%3E%20%3Ca%20href%3D%22%23%22%3Elink%3C%2Fa%3E%20%0A%3Ca%20href%3D%22%23%22%3Elink%3C%2Fa%3E%20%3Ca%20href%3D%22%23%22%3Elink%3C%2Fa%3E%20%3Ca%20href%3D%22%23%22%3Elink%3C%2Fa%3E%20%3Ca%20href%3D%22%23%22%3Elink%3C%2Fa%3E%20%3C%2Fdiv%3E%20%0A” message=”css code” highlight=”” provider=”manual”/]

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:
[pastacode lang=”css” manual=”el1%20%2B%20el2%0A%7B%0Acolor%3A%23f0f%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]
  • 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:
[pastacode lang=”css” manual=”el1%20-%20el2%0A%7B%0Acolor%3A%23f0f%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]
  • The obvious way to style el2 where it occurs directly before el1 with that same delightful pink(ish) text colour.
[pastacode lang=”css” manual=”label%20-%20input%5Btype%3D%22checkbox%22%5D%0A%7B%0Aorder%3A-1%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/] [ad type=”banner”]

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:
[pastacode lang=”css” manual=”el1%20-~%20el2%0A%7B%0Acolor%3A%23f0f%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]

Categorized in: