Hide empty span when .parsely-success??

Found a work-around via different CSS selectors… The main issue was, I wanted to style both the .help-block and the .caldera_ajax_error_block similarly but different with background colors and padding… but when a field was completed and .parsley-success was generated, the background fill on the empty span tag still remained… I solved this eventually by targeting the .help-block class via an adjacent sibling selector instead.

.caldera-grid .form-control + span { /* targeting .help-block */
	display: inline-block !important;
	font-size: 14px;
	color: #ffffff !important;
	background-color: #16beff;
	line-height: 1.5em;
	margin-top: 10px !important;
	border-radius: 3px;
	padding: 6px 12px;
}

.caldera_ajax_error_block {
	color: #ffffff !important;
	background-color: #ff0000 !important; 
	display: inline-block !important;
	font-size: 14px;
	margin-top: 10px !important;
	border-radius: 3px;
	padding: 6px 12px;
}

Hope that helps anybody else with the same issue.
Best
Shaun

• This reply was modified 6 years, 6 months ago by hotboxprintstudio.

Aaaaaaand I take it back… No clue why when I tested this the first time I thought it worked. It doesnt sadly. I feel like if either .help-block did not exist in both tags, or if a .parsley-success class could be added to the data-field-wrapper this would be a lot easier to resolve.

Suggestions?

Could not find a way around this so resulted to removing the background color of .help-block and just styling .parsley-required with one instead…