How to use css property under a class only

Tags: css

Problem :

I have a css property like this

:after {
 content: '';
 display: block;
 position: absolute;
 box-sizing: border-box;

it is affecting the whole page . So i need it affect all type of element only under 'togglebox' class . So how my syntax should be .

Solution :

You need to specify the class you want to apply your CSS rules to, like so:

.myclass:after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;

You would then need class="myclass" within the elements you want this style to apply to, in your case this would be your "togglebox". I'm not 100% sure what you mean by "togglebox", but I assume it would read as below:

<input type="checkbox" name="togglebox" class="myclass"/>

UPDATE: Given the comment below, it looks like you want to apply the style to the children of your "togglebox" - this is a pretty easy modification:

.myclass *:before,
.myclass *:after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;

This css rule will now apply to any (hence the *) element that is a descendent (immediate children or their children and so forth).

If you want to apply the rule only to direct children (and not children of children and so forth) you would use:

.myclass > *:before,
.myclass > *:after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;

See here for more information.

    CSS Howto..

    Html, CSS - How to create a donut chart like this?

    Jquery-How to grey out the background while showing the loading icon over it

    How to style Anchor in GWT?

    How to make a background color stretch to left and right of viewport in Safari Browsers

    how to change attribute of table cell based on contents when table rows created by while loop with PHP

    how to move canvas along with a centered canvas

    CSS - fluid design, how to correctly position right floats below the opposing element?

    how to vertical align a table inside a div

    CSS How to make element in the middle to shrink before its sibling jumps down

    How do I animate my CSS progress bar?

    How to animate DOM elements with JavaScript/CSS

    How to change the content value of iconmoon font?

    how to set css for Zend form?

    How can I select the first paragraph in this code?

    How to change color of selection in Select2 4.0.1?

    How do I position a Silverlight Control

    CSS Chevron Showing Unwanted Rectangle

    How do I get the height to the full page height?

    How to play CSS3 transitions in a loop?

    How to center divs on page

    How to load css into html dynamically?

    How to create a sliding animation on menu hover with jQuery?

    How to have a css element with transitions except initially?

    Superfish: How to keep sub menu open after it has been clicked

    How to optimize CSS file for speed

    when hovering on iframe, how do I trigger a class on element outside of iframe?

    How to slide a div out

    How to make a word bold in a text mentioned in bootstrap tooltip CSS/Jquery

    How do I animate an entire table row in Angular without affecting the table row border?

    How to have a background image wider than the content area of a website (without scrollbars)