thismethod thismethod - 24 days ago 6
CSS Question

I have a select class that is targeting both select inputs on a page but i only want it to target the one in the footer

<?php
/**
* @var Multisite_Block_Region $this
* @var Mage_Core_Model_Website $website
*/
$websites = $this->getWebsites();
?>
<div class="select">
<span><?php echo Mage::getStoreConfig('general/store_information/store_label'); ?></span>
<ul>
<?php foreach ($websites as $website): ?>
<?php
$defaultStore = $website->getDefaultStore();
$code = Mage::getStoreConfig(Local_RegionRedirect_Helper_Data::XPATH_SYSTEM_CONFIG_COUNTRY, $defaultStore);
?>
<li>
<a href="<?php echo $this->getUrl('regionredirect/index/set', array('_query' => array('code' => $code))) ?>">
<?php echo $website->getDefaultStore()->getConfig('general/store_information/store_label'); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>


This is the only select box I want to target:

<div class="region">
<div class="select">
<ul style="visibility: hidden; opacity: 0;">
<li>
<a href="http://local/regionredirect/index/set/?code=AU">
Australia (AUD $) </a>
</li>
<li>
<a href="http://local/regionredirect/index/set/?code=CA">
Canada (CA $) </a>
</li>
<li>
<a href="http://local/regionredirect/index/set/?code=ML">
Europe (€) </a>
</li>
<li>
<a href="http://local/regionredirect/index/set/?code=US">
USA ($) </a>
</li>
<li>
<a href="http://local/regionredirect/index/set/?code=JP">
Japan (¥) </a>
</li>
<li class="last">
<a href="http://local/regionredirect/index/set/?code=GB">
UK (£) </a>
</li>
</ul>
</div>
</div>


Any help would be greatly appreciated. I tried changing the class name but it breaks... i also tried to remove it and specifically put it in the span to try and only target the footer location. Neither worked.

Header is broken:

enter image description here

Footer is fine:

enter image description here

I would like no change to the footer but you can see where it's affecting the header select too because USA is being duplicated. Do not need that.

Answer

Be more specific in your CSS selector. Instead of using:

.select { ... }

Use:

.region .select { ... }

This way you target only elements that have the select class AND are children of some element with the region class.

Comments