I can't seem to wrap my head around why this nested sass isn't functioning as expected. Here's the snippet of my HTML code:
%h1 Office Listing
#office-holder
.listing-stats··
#address·
=@office_listing.address
.listing-stats-2
#rent
%span.special2 Rent:·
$#{@office_listing.rent}/month
#size
%span.special2 Space:·
#{@office_listing.size} sq. feet
All of this is contained within a div that gives a namespace to the HTML page, with two unique ids -- #office_listing and #show. Since I'm working with Rails, I'm utilizing namespaces to organize views for my CSS stylesheet. Take a look at the troublesome CSS below:
#office_listing#show {
#address {
width: 100%;
font-size: 50px;
background-color: #A0183C;
height: 100px;
text-align: center;
margin: auto;
font-size: 30px;
padding-top: 35px;
color: white;
}
}
Despite everything seemingly compiling correctly, the CSS styles aren't reflecting on the page. Upon inspecting the compiled stylesheets, they appear like so:
#office_listings#show #address {
width: 100%;
font-size: 50px;
background-color: #A0183C;
height: 100px;
text-align: center;
margin: auto;
font-size: 30px;
padding-top: 35px;
color: white; }
This should ideally target the specific HTML element, but it's just not working. What could be causing this issue?