Old 01-28-2012, 10:39 PM
Paul Ross's Avatar
Paul Ross is offline
Junior Member
Join Date: Jan 2012
Posts: 2

Please help find the CSS Selector path

Hi there. I would like to make some changes to the ecwid-AddressForm on the ecwid-productBrowser ecwid-productBrowser-CheckoutShippingAddressPage page, but can't figure out the correct CSS selector path.

According to the w3.org site, I should be using the descendant pattern "E F - Matches any F element that is a descendant of an E element." And in tests on some basic styling reveals this works as expected:

HTML Code:
<style type="text/css">

.item1 #text { color: red;}


<div id="container">
  Test1<br />
  <div class="item1">
    Test2<br />
    <div class="property">
       Test3<br />
       <div id="list">
         <span id="text">Test4</span>
  <div class="item2">
    <span id="text">Test5</span><br />
Only Test4 is red.

I have tried all of the following without success:

div.ecwid-productBrowser ecwid-productBrowser-CheckoutShippingAddressPage div.ecwid-AddressForm {


.ecwid-productBrowser ecwid-productBrowser-CheckoutShippingAddressPage .ecwid-AddressForm {


ecwid-productBrowser ecwid-productBrowser-CheckoutShippingAddressPage ecwid-AddressForm {


Attached is the CSS.

Bear in mind there is another ecwid-AddressForm on the ecwid-productBrowser ecwid-productBrowser-CheckoutPaymentDetailsPage page which I want give a different style to.
Attached Thumbnails
Click image for larger version

Name:	Snap2.jpg
Views:	52
Size:	170.0 KB
ID:	1045  

Last edited by Paul Ross; 01-28-2012 at 10:46 PM.
Reply With Quote
Old 02-01-2012, 01:23 PM
Matt K's Avatar
Matt K Matt K is offline
Ecwid Team
Join Date: Oct 2011
Posts: 5,070


Using the mentioned descendant selectors in custom CSS themes in Ecwid is certainly correct. The code fragments you provided didn't work because of the way how you indicate CSS classes in them. CSS class selectors should always start with a period ('.'). For example:
.ecwid-productBrowser .ecwid-productBrowser-CheckoutShippingAddressPage .ecwid-AddressForm {
I also want to note that such a method is used when there are several HTML elements with same class. As you rightly concluded, the ecwid-AddressForm appears in more than one place in Ecwid, so in order to specify where the changes should be applied, you need to use the descendant selectors scheme. But in most cases there is no need to specify the whole sequence of the parent and descendant HTML elements. For example, in your case, you don't have to include the '.ecwid-productBrowser', because the ecwid-AddressForm never appears outside the product browser.

As a result, please use the following formats for setting styles for the shipping address form:
.ecwid-productBrowser-CheckoutShippingAddressPage .ecwid-AddressForm {
and this is for the payment details address form:
.ecwid-productBrowser-CheckoutPaymentDetailsPage .ecwid-AddressForm {
Matt K
Ecwid Team

Ecwid Guide for Beginners

Ecwid Help Center

Ecwid video tutorials
Reply With Quote
Old 02-19-2012, 05:23 AM
Paul Ross's Avatar
Paul Ross Paul Ross is offline
Junior Member
Join Date: Jan 2012
Posts: 2

Thank you Matvey, that is exactly what I needed!

You guys are awesome!

Reply With Quote

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT. The time now is 02:37 PM.
Powered by vBulletin® Version 3.8.6. Copyright ©2000 - 2016, Jelsoft Enterprises Ltd.