Can You Have a <Span> Within a <Span>

Can you have a span within a span?

HTML4 specification states that:

Inline elements may contain only data and other inline elements

Span is an inline element, therefore having span inside span is valid.
There's a related question: Can <span> tags have any type of tags inside them? which makes it completely clear.

HTML5 specification (including the most current draft of HTML 5.3 dated November 16, 2017) changes terminology, but it's still perfectly valid to place span inside another span.

Putting a span inside a span inline

You can try below solution :

.content {    position: absolute;    top: 50%;    left: 50%;    margin: 0 auto;    -webkit-transform: translate(-50%, -50%);    transform: translate(-50%, -50%);}.fname{  display:block}.title{        font-size: 11px;    width: 20px !important;    white-space: normal;    display: inline-block;
}

<div class="content">  <h1>    <span class="fname">Firstname</span>    <span class="lname">Las</span>    <span class="title">Title one</span>    <span class="title">Title</span>              </h1></div>

:not CSS selector doesn't work for class in span within a span

.darken:not(.spaceless) applies to all elements that do have the "darken" class, but, don't have the .spaceless class.

To address your .spaceless element, the correct selector would be .darken .spaceless (note the space before .spaceless to indicate a child element relation.

So .darken:not(.spaceless) applies to both texts in your example, and .darken :not(.spaceless) applies to none of them - that one would apply to children of .darken which don't have the .spaceless class.

See also the example below (note also that subsequent rules can overwrite previous ones)

.darken {
  background: #AAA;
}
.darken .spaceless {
    color: green;
}
.darken:not(.spaceless) {
    color: white;
}
.darken :not(.spaceless) {
    color: red;
}

<span class = "darken">
    <span class = "spaceless">
        Test1
    </span>
    Test2
</span>

What elements can a span tag contain in HTML5?

Only inline elements may be contained within inline elements. span is an inline element. So, tags like a, img, sup, etc. can go within a span, but block level elements like div and p cannot.

UPDATE

In reality, different elements which default to inline display behave differently. Some "inline" elements may allow block elements (a for example), while others don't (like span).

If you're interested in what an HTML tag may contain, your most official source is the WHATWG page on HTML elements. You can check any HTML element and see what content is permitted (see 'Content Model' for each element):

http://www.whatwg.org/specs/web-apps/current-work/multipage/#auto-toc-4

Here's the definition of the span tag, which indicates that only 'phrasing' content is allowed.

http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-span-element

Scraping text from a span within another span tag

Use find_all to get all <span> tags with class="ingredient" then loop through the result then parse the data as in the code below:

ingredients = page_soup.find_all("span", {"class": "ingredient"})
for ingredient in ingredients:
    print("ingredient product: ", ingredient.find(class_='ingredient__product').text)
    print("ingredient unit: ", ingredient.find(class_='ingredient__unit').text)
    print("-")

EDIT:
Parsing data from ingredients variable within JS, although I would recommend using Selenium with a web-browser like PhantomJS for getting the data which is being pulled from javascript in the html code:

import json
import re

load = json.loads(re.findall(r"var ingredients = (.*?);", str(page_soup))[0])

for i in load:
    if i['unit'] != None:
        print("unit:", i["amount"], i["unit"]["name"])
    else:
        print("unit:", i["amount"])
    print("product:", i["product"]["name"], i["append"])
    print("-")

Output:

unit: 1 kg
product: aardappel (vastkokend)
-
unit: 1
product: sjalot
-
unit: 0
product: rode wijnazijn
-
unit: 4
product: rode biet (gekookt)
-
...

---

Related Topics