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, http://htmlcolorcodes.com 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.