As already stated by kravisingh, no parent selector in CSS for now.
Without changing your HTML, there's a workaround for your example: you can apply padding to children of link and the good news is - in your example - you can easily distinguish in pure CSS the children in both cases.
I used :only-child
to select a span element without any sibling (thus no i element before or after), demonstrated below.
You also have in your toolbox:
:first-child
(if span
matches then it means there is no i
before it)
:last-child
+
the adjacent sibling (i + a { /* */ }
is a
strictly following an i
?)
~
the general sibling (i ~ a { /* */ }
is a
following an i
, maybe with other elements in-between?)
- and
:not()
(ex: span:not(:only-child)
: span
elements that aren't alone in their parent element, may be preceded or followed by other span
or i
or …)
Notes:
- This workaround won't work for all styles and cases :/
- It's easier to add a class on parent (see Amit's answer) but there are cases where you can't modify markup or where a CSS solution is easier than modifying the back/front-end functions that generates markup (though it's then harder to maintain code IMHO)
Codepen
/* CSS from question (example #1) */
.on-link > li > a {
display: inline-block;
padding: 3px 5px;
background-color: lightgreen;
}
/* Example #2 */
/* Applies to i+span */
.on-children i {
/*padding: 3px 0 3px 5px;*/
background-color: lightblue;
}
.on-children i + span {
/*padding: 3px 5px 3px 0;*/
background-color: pink;
}
/* Applies to any span without an icon (after or before)
Note: :first-child would allow for an icon at the end of the link */
.on-children span:only-child {
padding: 3px 5px;
background-color: tomato;
}
/* Demo */
.on-children i:before {
content: 'i ';
}
<h1>Styles link (original styles from OP)</h1>
<ul class="on-link">
<li>
<a id="btn-other-1" href="#"> <!–- I do not want apply css for this anchor tag because it has i inside –->
<i class="fa fa-check" aria-hidden="true">
</i><span>Other stuff-1? </span>
</a>
</li>
<li>
<a id="btn-other-2" href="#">
<span>Other stuff-2</span>
</a>
</li>
</ul>
<hr>
<h1>Styles children of link (my answer)</h1>
<ul class="on-children">
<li>
<a id="btn-other-1" href="#"> <!–- I do not want apply css for this anchor tag because it has i inside –->
<i class="fa fa-check" aria-hidden="true"></i><span>Other stuff-1?</span>
</a>
</li>
<li>
<a id="btn-other-2" href="#">
<span>Other stuff-2</span>
</a>
</li>
</ul>