Selectors - C S S

Basic

• selector {property: value;} => Selects the particular tags to apply CSS
• tag {property: value;} => Selects that tag
• #idName {property: value;} => Selects that id
• .className {property: value;} => Selects that class
• * {property: value;} => Selects everything (except ::before & ::after ...)
• * {property: value;}
• .className tag {property: value;} => Selects the children tag of the given class, Similarly nested selectors can be used for other cases
• .className > tag {property: value;} => Selects all the direct children tag of the given class
• .className tag + tag {property: value;} => Selects the children tags of className which has a adjacent tag before it
• .className tag ~ tag {property: value;} => Selects the children tags of className which has a tag before it
• [attributeName] {property: value;} => Selects the tag having this attribute
• [attributeName="val"] {property: value;} => Selects the tag having this attribute with given exact value
• [attributeName|="val"] {property: value;} => Selects the tag having this attribute with given value as starting separated by "-" from rest of the value
• [attributeName^="val"] {property: value;} => Selects the tag having this attribute with given value as starting
• [attributeName*="val"] {property: value;} => Selects the tag having this attribute with actual value containing the given value
• [attributeName$="val"] {property: value;} => Selects the tag having this attribute with given value at the end

Pseudo Selectors

• .idName:hover {property: value;}
• .idName:active {property: value;}
• .idName:empty {property: value;} => Matches every element that has no children (including text nodes)
• .idName:visited {property: value;}
• :target {property: value;} => To style the current active target element
  • URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element
• :not(tagName/selector) {property: value;} => Matches every element that is NOT the specified element/selector
• :where(selectors) {property: value;} => To remove specificity from a complex selector
• .idName::only-child {property: value;} => Matches every element that is the only child of its parent
• .idName::only-of-type {property: value;}
• .idName::first-line {property: value;}
• .idName::first-child {property: value;}
• .idName::nth-child(n) {property: value;}
• .idName::nth-child(odd) {property: value;}
• .idName::nth-child(n1*n2+n3) {property: value;}
• .idName::nth-of-type(n) {property: value;}
  • Instead of "n" can use any equation
• .idName::after {property: value;}
• Element should be block

  .idName::before {
    content: "";
    <!-- Pulls data from the attribute from HTML -->
    content: attr(attributeName);
  }
  

Media Query

• Basic

    @media () and () {
      /* Code */
    }
  

• Only for screen type of device

    @media only screen and () {
      /* Code */
    }
  

• CSS will be applied when condition inside the braces are satisfied

    @media not all and () {}
  

• Enables when dark mode is on

    @media (prefers-color-scheme: dark) {
      /* Code */
    }
  

• Targets only devices that can hover

    @media (hover: hover) {
      /* Code */
    }
  

• Targets only devices that don't hover

    @media (hover: none) {
      /* Code */
    }
  

Others

• Check Browser Support

  @supports (property: value) {
    /* Code */
  }
  @supports not (property: value) {
    /* Code */
  }
  @supports (property: value) or (property: value) {
    /* Code */
  }
  @supports (property: value) and (property: value) {
    /* Code */
  }