CODEWITHSUNDEEP
htmlcss
user2953119
user2953119

Reputation:

Parent element in css

What's a difference in selector's pattern E * F and E F? Both E * F and E F applying appropriate style to F which is child of E. Consider HTML:

<div id= "parent">
    <div id="subparent">
        <div id="subsubparent">
            <input type="text"/>
        </div>
    </div>
</div>

and corresponding css

#parent, #subparent{
    padding:20px;
    background:green;
    width: 400px;
    height: 400px;
}
#subparent{
    background:black;
    height:200px;
    width:200px;
}
#subsubparent{
    background: blue;
    width:100px;
    height:100px;
}
div[id="parent"] input{
    width:50px;

}

Where div[id="parent"] input applying appropriate style to input which is child of div#parent. I my case div#subparent is child of div#parent, div#subsubparent is child of div#subparent and input is child of div#subsubparent. Hence input is child of div#parent.

In the case of E * F. E * matches any element which child of E and hence E * F mathces F element which child of E.

Upvotes: 1

Views: 109

Answers (3)

StackSlave
StackSlave

Reputation: 10627

E * F matches descendent F that is a descendent of * (anything), which is a descendent of E, while E F matches descendent F of E. E * F does not match it's child descendent, only descendents of its child. Use > for child.

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816414

What's a difference in selector's pattern E * F and E F?

E F matches any F which is a descendant if E. The selector also matches if F is a child of E.

E * F matches any F which is a descendant of any descendant (*) of E. The selectors does not match if F is a child of E.

Example:

<div class="foo">
    <div class="bar"></div>
    <div class="baz">
         <div class="bar"></div>
    </div>
</div>

.foo .bar matches all .bar elements inside .foo.

.foo * .bar only matches the .bar element inside .baz.

Another way to look at it: E F could also be written as E * F, E > F, hence E * F is only a subset of the what E F selects.

Upvotes: 1

Alexis Wilke
Alexis Wilke

Reputation: 20731

Selectors are explained here:

http://www.w3.org/TR/CSS21/selector.html

E F

means all F children of E.

E * F

means all F grand children of E. That is, F cannot be a direct child of E. That being said, it can be at any level below the children of E.

Another precision:

E > F

means F but only if a direct child of E.

Upvotes: 1

Related Questions