Different CSS style behaviour depending on the image style

user_15043769 0
Viewed 87

I have some text with images aligned left or right, wrapped by text. Their alignment is hardcoded in the .html file like this: <img style="float:left" ... />. When the image is aligned left, I want to have some space to the rigth (margin: 0 1rem 0 0). And vice versa, if the image is on the right, I want to have some space to the left (margin: 0 0 0 1rem). See the scheme below. I need to do this by styles in styles.css file, something like:

figure[style="float: left;"] {
  margin-right: 2rem;
}
figure[style="float: right;"] {
  margin-left: 2rem;
}

Please anyone help me with it!

enter image description here

css-float css html
4 Answers

The problem with the selector you write is that it should be identical to the way it's written in HTML (same letter cases, same white spaces ... etc).

So according to the HTML you wrote, you should modify it to the following

figure[style="float:left"] {
  margin-right: 2rem;
}

figure[style="float:right"] {
  margin-left: 2rem;
}

Or you can use something like the following

figure[style*="float:left"] {
  margin-right: 2rem;
}

figure[style*="float:right"] {
  margin-left: 2rem;
}

The asterisk means that the style contain float:left or float:right and apply the required style.

There is something that comes to my mind but I never tested it's working fine, I tested it.

figure[style*="float"][style*="left"] {
  margin-right: 2rem;
}

figure[style*="float"][style*="right"] {
  margin-left: 2rem;
}

This should test that the selector contain both combination (float, right or left). Didn't test it though.

user_4978280

You can do attribute-based selectors, I never tried doing it with styles, but it's a bad idea. Even if it works, it assumes that no other style is applied on your tag. It is highly unreliable. Tried

<!DOCTYPE html>
<html>
<head>
<style>
a[style="color:red;"] {
  background-color: yellow;
}
</style>
</head>
<body>

<p>The link with target="_blank" gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank" style="color:red;">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>

and it appears to be working (the yellow background is successfully applied) in FireFox. However, this is a very bad idea, it would be much wiser to create these CSS classes:

.fl {
    float: left;
}

.fr {
    float: right;
}

Refactor your hard-coded styles to use these classes instead and use class-based selectors afterwards. So, the thing you want to achieve is achievable, but not recommendable.

user_4365600

It's a tiny issue you may didn't notice which is semicolon because in css file you should write the exact css selector as it appears in html attribute, see below for example:

p[style="color: red;"] {
  background-color: yellow;
}
p[style="color: red"] {
  background-color: green;
}
<p style="color: red;">This will be yellow bg!</p>
<p style="color: red">This will be green bg!</p>

BUT as @Lajos Arpad mention in his answer, it's a bad idea to style your css depending on html attributes.

user_79180370

This is my first answer. If for some reason padding like this doesn't work:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

else I would add styling to the paragraph itself and not just the image.

You could also use different classes for different images:

  figure1[style="float: left;"] {
  margin-right: 2rem;
}
figure2[style="float: right;"] {
  margin-left: 2rem;
}
user_143748420
Related