CODEWITHSUNDEEP
htmlcss
Coffee
Coffee

Reputation: 2233

css applying style element to part of the children

So I'm creating the page in which elements with classes "question" and "answer" are being created dynamically, and they appear one inside the other (so the first question div contains answer divs, which contain following questions and so on), and I want them to have different border color, for example red one for questions and blue one for answers, but I can't just write them border-color property in my .css file because everything appears recursively and the last written property is as a result applied to all the elements. What could be the solution?

It looks something like this:

<div class="management">
        <button class="btn btn-primary addtree" type="button">Add new tree</button>
        <ul>
            <div id="new"></div>            
        </ul>
    </div>

<script>
    $(document).ready(function(){
        var ident = 0;
        var question;
        var answer;
        $.get('question', function(data){
                question = data;
        });
        $.get('answer', function(data){
                answer = data;
        });

        $(".management").on("click", ".addtree", function(){
            ident++; 
            $('#new').append(question);
            $('.question:last').attr('id',ident);
        });

        $(".management").on("click", ".addquestion", function(){ 
            ident++;
            $(this).parent().append(question);
            $(this).parent().children('.question').attr('id',ident);
            $(this).parent().children('.answer').css({"margin-left": "30px"});
            $(this).parent().children('.question').css({"margin-left": "30px"});
        });

        $(".management").on("click", ".addoption", function(){
                $(this).parent().append(answer);
                var currid = $(this).parent().attr('id');
                $(this).parent().children('.answer').attr('id',ident);
                $(this).parent().children('.answer').css({"margin-left": "30px"});
                $(this).parent().children('.question').css({"margin-left": "30px"});
            });
</script>

Upvotes: 1

Views: 33

Answers (1)

iivannov
iivannov

Reputation: 4411

From what I can understand you want something like this:

.question {
  border: 2px solid red;
}
.answer {
  border: 2px solid blue;
}


.question, .answer {
  padding: 8px;
  margin: 0 0 8px 0;
}
<div class="question">
  Lorem ispum dolor sit amet

  <div class="answer">
    Color mit apsem
  </div>
</div>

<div class="question">
  Lorem ispum dolor sit amet

  <div class="answer">
    
    <div class="question">
      Lorem ispum dolor sit amet

      <div class="answer">
        Color mit apsem
      </div>
    </div>

  </div>
</div>

Upvotes: 1

Related Questions