Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Apply css style to child element

Tags:

html

css

Here is an sample example

<html>
<head>
    <style>
        .test > input {     //this is wrong.
            color:red;
        }
    </style>
</head>

<body>
    <div class="test">
        <div>
            <input></input>
        </div>
    </div>
</body>
</html>

What I want to do is apply a style to input element. How to select a input element. with the help of div's css style name.

like image 706
Mayank Pandya Avatar asked Aug 13 '13 02:08

Mayank Pandya


People also ask

How do you target a child's element in CSS?

Child Selector: Child Selector is used to match all the elements which are children of a specified element. It gives the relation between two elements. The element > element selector selects those elements which are the children of the specific parent.

How do I apply CSS to child element based on parent?

It's easy to apply style to a child element, but if you want to apply style to a parent class that already has child elements, you can use the CSS selector child combinator ( > ), which is placed between two CSS selectors. For example, div > p selects all <p> elements where the parent is a <div> element.

What is a child element in CSS?

Introduction to CSS Child Selector. CSS child Selector is defined as the CSS selector that selects only elements that are direct children which is clearer than the contextual selector.


1 Answers

you can just use .test input (which will apply to every input in <div class="test">).

Your CSS with > only selects direct descendants

like image 108
adnrw Avatar answered Oct 08 '22 02:10

adnrw