Apply style on inner element of CSS selector

Question

I would like to apply style on an element which is between 2 other elements (siblings) - see below - on the img which is between the label and input.
I can use the + operator for the selector of the siblings, but I want the style to be applied on the second element out of the three.

HTML:

<label class="field-name">XXXX</label>
<img class="validation-mark">
<input type="text" class="ng-invalid">

CSS:

label + img.validation-mark + input[type="text"].ng-invalid
{
  display: inline !important; //I need this style to be applied on the img
}

you can't do that in CSS - you can use `+` or `~` to select *siblings following the element* but not *before*.... — kukkuz, Mar 26 '19 at 08:59
To be able to apply style to img, it should be after the input in html. Sometimes you can adjust position of input and img so it visually appears as img is before input. — Sergiy T., Mar 26 '19 at 09:11

score 0 · Answer 1 · answered Mar 26 '19 at 08:23

You want to select the image, which is next to the label right?

If yes, you can use the adjacent sibling combinator selector:

An adjacent sibling combinator selector allows you to select an element that is directly after another specific element.

These selectors can help you apply styling in a contextual way.

label + img.validation-mark
{
  display: inline !important; //I need this style to be applied on the img
}

If it's not the case or the specific requirement, I would suggest you to just select the image itself and apply the style to it:

img.validation-mark
{
  display: inline !important; //I need this style to be applied on the img
}

Also, if you are using sass, like you tagged, you can do it like this:

img
{
    &.validation-mark {
         display: inline !important; //I need this style to be applied on the img
    }
}

No - this is not the case - I want to apply the style depending also on the class of the third element: , meaning - in this case, only if there is an input type with a n "ng-invald" class — Guy E, Mar 26 '19 at 08:27
I think this is what you are looking for: https://developer.mozilla.org/en-US/docs/Web/CSS/:has However, it's not really wide supported yet, you can experiment with it, but I think your problem can only be solved by js/jquery — Patrik Alexits, Mar 26 '19 at 08:33

score 0 · Answer 2 · answered Mar 26 '19 at 08:25

0

First thing, why don't you directly use class for applying styles.

.validation-mark{
display: inline !important; 
}

And if you have to find 2nd element, you can also use JQuery.

$(label.field-name).next('img.validation-mark').css({'display': 'inline !important'});

answered Mar 26 '19 at 08:25

Ashvani mishra

129
7

Regarding your first comment: the style of the validation-mark element depends on the class of the third element, meaning:if the third element has "valid" class, style it other than if it has style "invalid". Regarding the second comment - I use angular, don't use jquery and don't want to put it the code - it should be applied across the all application. – Guy E Mar 26 '19 at 08:42

Hassan Siddiqui · Answer 3 · 2019-03-26T09:49:23.770

Make it simple, it'll apply display: inline !important; on both image and input. Thanks

label + img.validation-mark,
label + img.validation-mark + input[type="text"].ng-invalid {
  display: inline !important;
}

If you want to apply display: inline !important; only on img.

.validation-mark {
  display: inline !important;
}

If you want to apply display: inline !important; only on input.

.ng-invalid {
  display: inline !important;
}

If you want to apply display: inline !important; on all Elements.

label,
img,
label {
  display: inline !important;
}

Apply style on inner element of CSS selector

3 Answers3