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.
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.
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.
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.
you can just use .test input
(which will apply to every input in <div class="test">
).
Your CSS with >
only selects direct descendants
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With