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.
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.
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.
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.
Related
Is there a CSS selector to select the nth element with class "someclass" when the elements you need to match are "nested":
<div>
<p><span></span></p>
<p><span class="someclass"></span></p>
<p><span></span></p>
<p><span class="someclass"></span></p>
<p><span class="someclass"></span></p>
<p><span class="someclass"></span></p>
<p><span></span></p>
.
.
.
</div>
it's not possible to move the class to the the p tags unfortunately.
I've tried:
div p div.someclass:nth-child(2n)
div p div.someclass:nth-of-type(2n)
none seem to quite do exactly what I need.
This is how the HTML is structured; I am attempting to obtain the value of <div> if the sibling <p> is equal to type1
<div class="zsg-lg">
<div class="hdp-fact-ataglance">
<div class="media-bd">
<p>
type1
<div>
value
<div class="zsg-lg">
<div class="hdp-fact-ataglance">
<div class="media-bd">
<p>
type2
<div>
value2
Here's my XPath that's currently not working, I'm pretty confused on how to structure it.
div[contains(#class, "zsg-lg")]/div[contains(#class, "hdp-fact-ataglance")]/div[contains(#class, "media-bd") and [p == "Type"]]/div/text()
I would suggest this:
normalize-space(
//div[contains(#class, "zsg-lg")]
/div[contains(#class, "hdp-fact-ataglance")]
/div[
contains(#class, "media-bd")
and
normalize-space(p/text())="type1"
]
/div
/text()
)
looks like the syntax was a little off, this worked:
div[contains(#class, "zsg-lg")]/div[contains(#class, "hdp-fact-ataglance")]/div[contains(#class, 'media-bd') and p = 'type1']/div/text()
I would like to get data from html
<div class="xyz">
<div class="opq">
<div class="one">One</div></div>
<div class="rst">
<div class="vwu">
<div class="alpha">A</div></div></div>
<div class="opq">
<div class="one">Two</div>
<div class="rst">
<div class="vwu">
<div class="alpha">B</div></div></div>
<div class="rst">
<div class="vwu">
<div class="alpha">C</div></div></div>
<div class="opq">
<div class="one">Three</div></div>
<div class="rst">
<div class="vwu">
<div class="alpha">D</div></div></div>
</div>
</div>
How i can get the data in new format, where A is child of One, Two is parents of B and C, and so D is parents of D. When i try use loop for ( element) i just get all of component. I have trouble to get element between One - Two - Three. There only one element (A) between "One" dan "Two". Next, 2 element (B & C) between "One" and "Two". The Last one is only 1 element, D, after "Three".
And i will show like :
One :
> A
Two :
> B
> C
Three :
> D
I use eq(0) to access them, but the result show false output.
To do that i'm simply doing this:
Elements ht = dok.select("div.one");
Elements li = dok.select("div.alpha:eq(0)");
for(Element el : ht ){
System.out.println(el.ownText()+" : "+li.get(i).text());
i++;
}
But the result was:
One :
> A
Two :
> B
Three :
> C
based on the result, isn't like what i hope. That's it between "Two" and "Three" actually have 2 element, B and C. While the last "Three" it must have element of D. But in this result , the element D is can't display.
Thanks for any advice
I have a fixed-width DIV that floats left, with the main content just beside it. When I resize the window, instead of a horizontal scrollbar I see the main DIV jumping downward below the floating DIV, i.e. the "floating" effect disappears.
A demo is available here:
http://jsfiddle.net/rustamabd/Xygn2/
How do I tell the browser that I always want to see both DIVs side-by-size, but without having to set min-width on the main DIV (I want the tables in the main div to squeeze as much as possible before the scrollbar appears).
Is it necessary to have two elements with class "main"? By changing the class name of your text div to "mainBody" I was able to get what you want with this...
.main-left {
float:left;
}
.left-block-1 {
width: 160px;
height: 400px;
background-color: grey;
}
.mainBody {
left:175px;
width:400px;
position:absolute;
}
.body{
overflow:auto;
}
So the html from the edited fiddle is...
<div class="main">
<div class="main-left">
<div class="left-block-1"></div>
</div>
<div class="mainBody">
Block-1
<br>
QWERTYUIOPASDFGHJKLZXCVBNMQWER
<table>
<tr><td>A B C</td><td>A B C D E F G H I K L M O P Q R S T U V W X Y Z</td></tr>
<tr><td>A B C</td><td>A B C D E F G H I K L M O P Q R S T U V W X Y Z</td></tr>
<tr><td>A B C</td><td>A B C D E F G H I K L M O P Q R S T U V W X Y Z</td></tr>
</table>
</div>
</div>
If you want to make the layout responsive, you must use percentage unit. And use word-wrap:break-word; to make the text go to the next line
Live demo
Otherwise, you need to use overflow:hidden; but this will truncate the word when it needs more space
.main{
overflow:hidden;
}
Live demo
In HTML 4.01 certain end tags are forbidden, that means it in not valid markup to have them, e.g.:
Invalid Valid
=================== =================
<BR/> <BR>
<BR></BR>
<IMG src="..."/> <IMG src="...">
<IMG ...></IMG>
<INPUT ... /> <INPUT ...>
<INPUT ...></INPUT>
In the HTML 4.01 specification the indication of an end tag being optional or forbidden is nicely summarized in the index of elements:
Name Start Tag End Tag
AREA F
BASE F
BASEFONT F
BODY O O
BR F
COL F
COLGROUP O
DD O
DT O
FRAME F
HEAD O O
HR F
HTML O O
IMG F
INPUT F
ISINDEX F
LI O
LINK F
META F
OPTION O
P O
PARAM F
TBODY O O
TD O
TFOOT O
TH O
THEAD O
TR O
Where is the HTML 5 equivalent of indicating which end tags are:
required
optional (implicit)
forbidden
When and how optional end tags should behave, in HTML5 spec:
http://www.w3.org/TR/html5/syntax.html#void-elements
8.1.2 Elements
Void elements only have a start tag; end tags must not be specified for void elements.
Void Elements
area
base
br
col
command
embed
hr
img
input
keygen
link
meta
param
source
track
wbr
A more concise form:
Element Type Start Tag End Tag
=============== ========= =========
Normal - O (some)
html O* O*
head O* O*
body - O*
li - O*
dt - O*
dd - O*
p - O*
rt - O*
rp - O*
optgroup - O*
option - O*
colgroup O* O*
thead - O*
tbody - O*
tfoot - O*
tr - O*
td - O*
th - O*
otherwise - -
Raw text - -
script
style
RCDATA - -
textarea
title
Void - F
area
base
br
col
command
embed
hr
img
input
keygen
link
meta
param
source
track
wbr
Foreign - -
MathML
SVG