CSS conditional effect? - html

Question

The following code is setup in the template to show each time a new sidebar widget is inserted. (It shows around each new widget)
<div class="sidebox-top"></div>
<div class="sidebox">
<div class="widgets">
<div class="textwidget">
[WIDGET CONTENT]
</div>
</div>
</div>
The above displays the following CSS:
.sidebox-top {
background-image: url("/images/top-border-side.gif");
background-position: center top;
background-repeat: no-repeat;
height: 4px;
}
.sidebox {
border-bottom: 1px solid #D9D9D9;
border-left: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
margin-bottom: 14px;
padding: 10px 18px 5px;
}
The result is this:
This works great for most all widgets used. However, I want the above images to show in the sidebar without the sidebox-top blue line or border. I know there is a way to use certain CSS symbols to identify before or after by using the > symbol, I'm just not sure how to use that here or if it will even work.
Any help is always appreciated. Thank you!

Answer 1

Replicating the issue
Okay, I've attempted to replicate your image in this JSFiddle demo. In case JSFiddle is down, here is what this looks like:
For this instead of using a background-image and 4px height on .sidebox-top, I've simply used a 4px border-top. Whilst not an identical replication, this achieves the same basic effect.
Hiding the .sidebox-top element
Step 1
To begin with, we need to target the very first child contained within the .textwidget divider, only if it's an img. We do not want to apply this styling to any other img elements after that, nor do we want to apply the styling if the img isn't the first element within the container. To do this, we can use:
.textwidget img:first-child { ... }
Step 2
The next step is to give our image top padding and negative top margin equal to the sum of the top padding of .sidebox and the height of .sidebox-top. We then want to give our image a background which is the same colour as the background of your widget:*
.textwidget img:first-child {
background: #fff;
padding-top:14px;
margin-top: -14px;
}
* Note: This assumes that your widget's background is the same as your widget's container's background and that the background is a solid colour. If it isn't, you'll need to play around with background-position to align your patterned background with the widget's background.
From this, we end up with our image overlapping the top border whilst remaining in the same position that it started in:
Step 3
The third step is to cover the entire .sidebox-top. To do this we're going to need to give our selected img left and right padding and negative left and right margin equal to the sum of the left and right padding of the .sidebox and its border-width:
.textwidget img:first-child {
... /* Styling from Step 2 */
padding-left: 18px;
padding-right: 18px;
margin-left: -19px;
margin-right: -19px;
}
Step 4
Step 3 has certainly covered the entire .sidebox-top, but it's also covered the borders of .sidebox. For this we need to add identical borders to our selected img and reduce the left and right padding on our img to allow for this:
.textwidget img:first-child {
... /* Styling from Step 2 */
padding-left: 17px;
padding-right: 17px;
... /* Margins from Step 3 */
border-left: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
}
Final Step
The final step is to add a top border to our img to complete the border of the widget. As with Step 4, for this we'll need to reduce the size of the top padding to allow for this border:
.textwidget img:first-child {
... /* Styling from previous steps */
padding-top: 13px;
border-top: 1px solid #D9D9D9;
}
Final JSFiddle demo.