making a custom css rule

Question

Is it possible to make a custom rule in Css as @media I have a parent class and need to make changes depended on this class as

    <div class="parentGreen"> 
          <ul class="ul1">
            <li>1</li>
            <li>2</li>
         </ul>
         <ul class="ul2">
           <li>1</li>
          <li>2</li>
       </ul>
</div>

so when i change the parentGreen the items inside their css changes too

@parentGreen{
    ul{
direction: ltr
}
}

@parentYellow{
  ul{
direction: rtl;
margin:10px;
}
}

Use css classes inside your media selector? :/ .parentGreen ul {...} and parentYellow ul {...} — nanobar
– nanobar, Commented Feb 5, 2018 at 11:09

ibrahimyilmaz · Accepted Answer · 2018-02-05 11:18:50Z

3

Compiled version on this link is what you want.

Do you hear about less? Try searching about it. Less is better choice for creating nested css. You can write like this:

.parent {
    .child1 {
      color: blue;
    }
    .child2 {
      color: blue;
    }
}

Look this link.

edited Feb 5, 2018 at 11:18

answered Feb 5, 2018 at 11:14

ibrahimyilmaz

2,3751 gold badge25 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Niet the Dark Absol Over a year ago

This is incorrect, the & are not needed - as it stands, .parent { &.child1 { .. } } compiles to .parent.child1 { .. } which is not right ;)

ibrahimyilmaz Over a year ago

Yes, sure. Thanks for warning.

Yosra Nagati Over a year ago

however i dont want to use a pre-processor css

GreyRoofPigeon · Accepted Answer · 2018-02-05 11:08:49Z

1

This should work...

.parentGreen ul {
    direction: ltr
}

.parentYellow ul {
    direction: rtl;
    margin:10px;
}

answered Feb 5, 2018 at 11:08

GreyRoofPigeon

18.1k5 gold badges39 silver badges60 bronze badges

Collectives™ on Stack Overflow

making a custom css rule

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related