How to use css property under a class only


Tags: css

Problem :

I have a css property like this

:before,
: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:before,
.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..

    How to create a frosted glass effect using CSS?

    how to control the css rotation of an element inside a rotated element?

    How to prevent HTML Email from having quoted printable when sending with C# using System.Net.Mail.MaiMessage

    jQuery & CSS: how to convert this drawer menu from left to right?

    How to center a navigation bar with CSS or HTML?

    Only show one hidden table row at a time

    Building a DOS-feel script. How to make the command line?

    How can I do width = 100% - 100px in CSS?

    How to add style to android app

    How do you properly apply hover css to
  • elements with list-style-type: none?
  • Infuriating gap: How do you get rid of a gap between IMG and surrounding content

    CSS - how to fix the hover?

    How to make stylish pageviews counter using html and css? [closed]

    sencha touch 2.0 : How to apply conditional background color to list item

    How to set two background color to one element in CSS?

    How to target CSS class names that start with digit

    How to center text in lists?

    CSS: How to address specific tags

    CSS: How to add borders of different colors to input radio buttons labels?

    How to make a space between tags (icons) in table?

    How to style focus on jquery ui dialog widget?

    Javascript: How do I get the id of a clicked link and then style it in css

    How to use CSS in Emails (specifically, to design hyperlink button)

    How to add image, that overlapping Bootstrap modal?

    How to wrap lines in an inline-block with CSS?

    How to achieve horizontally centered layout with partially liquid column?

    How to handle right-to-left text-input fields the right way?

    How to order rows (or divs) vertically using blueprint css?

    How to change the location of my yt video ( I want to move it approximately 10 cm down and 10cm to the right so that it doesnt clash)

    How to grow the width of a div as the width screen decreases using Css?