How to Properly Use the “>” (greater-than sign) CSS selector

  >   is the child combinator in CSS. That means the selector div, span, p, h1 etc. >  .my-class   only selects the requested  .my-class   objects that are nested directly inside a div, span, p, etc. and not any objects that are nested further within.

Here is an illustration:

What’s selected and what’s not:

  1.  Selected  –  .my-class   is located directly inside .my-div   – a parent-child relationship is established between both elements.
  2.   Not selected  –  .my-class (2) is contained by a second div with another class (.my-div2) within the div, rather than the div itself. Although this  is a descendant of the div, it’s not a child; it’s a grandchild.

Here is the CSS that modifies the background-color of .my-class(parent-child) to red and leaves the same class unchanged even if they have the same class name (.my-class).

Try it Yourself

Let’s take a look at a more complex example to see how it works:

Try it Yourself

How to specify the css color property

red - green - blue - yellow - canvasColors in CSS can be specified with a few simple methods, but what is the best method for your project? Well, that can be a particular choice for every project, depending on how you choose to pick your colours.

Colors in CSS are most often specified by:

  • A valid color name – like "blue" (Predefined/Cross-browser color names)
  • An RGB value – like "rgb(255, 0, 0)" (Red Green Blue)
  • A HEX value – like "#ff0000" (Hexadecimal Colors)

But there are also other methods you can use:

  • RGBA colors – like “rgba(255, 0, 0, 0.3)” (RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity of the object)
  • HSL colors – like hsl(120, 100%, 50%) (HSL stands for hue, saturation, and lightness)
  • HSLA colors – like hsla(120, 100%, 50%, 0.3) (HSLA color values are an extension of HSL color values with an alpha channel – which specifies the opacity of the object)

The most popular methods, as I’ve seen over the years are the HEX and the RGBA methods.

You can use a various free online tools to pick the right HEX or RGB variables for your colours, is one of the most popular.

Also, you can be in style with the latest colours from PANTONE® the world-renowned authority on color and provider of color systems and leading technology for the selection and accurate communication of color across a variety of industries.

You can see a live DEMO and change settings to see how it works.

jQuery sidebar menu with show/hide link

This tutorial shows how to implement a jQuery sidebar menu with a show/hide link. The menu is using jQuery and css to handle the functionality.

See a live DEMO.

To make it work, all you need to do is edit the links showed in the menu/demo version and include all the files needed: jQuery, font-awesome(optional).

See a live DEMO.

Make div Disappear with CSS Media Queries on Screen Width

This simple example will show you how to make a div disappear with CSS Media Queries on screen width.

How can you make a div content disappear when the screen reaches a certain width using media queries? The answer is quite simple, you use CSS and display: none property.

Let’s say that you have a div that needs to disappear when someone is accessing your webpage from a tablet or mobile phone.

You can use this list of common resolutions to figure out if you want to hide or display certain parts of your website.

To hide a particular object you can use a class or id this way:

You can mix the size variable to fit your needs by modifying the @media screen and (max-width: 1124px)

See a live DEMO of various screen sizes.