Skip to content

CSS 2

IT Notes → CSS @ December 22, 2020

  • X + Y (adjacent selector) means it selects the element preceded by the former element. div + p effects on p tag coming immediately after closing div tag.   
  • X > Y means Y is immediate child of X.
  • X ~ Y is similar to X + Y but less strict. div ~ p effects on p tag coming   after closing div tag at same level.
  • X[href=”foo”].
  • X[href*=”foo”]. It means href = *foo*.
  • X[href^=”foo”]. It means href = ^foo*.
  • X[href$=”foo”]. It means href = *foo$.
  • X[data-*=”foo”]. It means   X[data-xyz=”foo”] will access all tags with attribute data-xyz=”foo”.
  • X[data~*=”foo”]. It allows us to target an attribute which has a spaced-separated list of values. It means   X[data~xyz=”foo”] will access all tags with attribute data-xyz=”eoo goo foo”.
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x