Как получить цвет фона для последней строки с последним элементом ввода

Question

не удалось установить цвет фона только для последнего элемента в строке, я пробовал свойства css last-child, но не смог исправить.пожалуйста, предложите любой другой подход.

<div  id= "row" class="Row">
                <label>Row1:</label>
                <div  id= "CCol1" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1"  class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol2" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol3" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol4" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol5" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
            </div>

Над кодом : мне нужно применить цвет фона для последней строки только в последнем вводе

Answer 1

Вы также можете использовать последний тип

div div: last-of-type .CCol{
    backgroung-color:red;
}

Answer 2

.CCol:last-child .CWidth {
  background-color: #D1D1D1;
}

Сначала вы должны взять последний дочерний элемент .CCol и после того, как вы можете взять имя класса последнего ввода.У вас есть имя класса во вводе последней строки, поэтому нет необходимости брать последнего потомка для этого

Надеюсь, это поможет вам.Спасибо.

Answer 3

Посмотрите, хотите ли вы этого.

.Row .CCol:last-child input:last-child {
  background: #003;
  color: #fff;
}

https://jsfiddle.net/Legk4sd1/4/

.Row .CCol:last-child input:last-child {
  background: #003;
  color: #fff;
}

<div  id= "row" class="Row">
                <label>Row1:</label>
                <div  id= "CCol1" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1"  class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol2" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol3" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol4" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol5" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
            </div>

Answer 4

Если я правильно понимаю, это должно работать

.CCol:last-child input {
  background-color: green;
}

Answer 5

• Сначала вам нужно нацелиться на last-child из CCol
• После этого цель last-child из input этого конкретного CCol

Подводя итог, вы можете использовать что-то вроде этого

.Row .CCol:last-child input:last-child {
  background-color: red;
}

Вот рабочий фрагмент

.Row .CCol:last-child input:last-child {
  background-color: red;
}

<div  id= "row" class="Row">
                <label>Row1:</label>
                <div  id= "CCol1" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1"  class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol2" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol3" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol4" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol5" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
            </div>