Applying Different Styles to HTML Elements Based on Parameter Values
We can determine the styles to be applied to the html tags according to their parameters.
tagName [parameterName] { … }
With a usage like above, we can apply a style to the tags that have the specified parameter.
For example, let's apply a border to images that have a title parameter.
img[title] {
border: 2px solid blue;}
Checking the value of the parameter, we only want to apply the style to the labels having a certain value;
tagName[parameterName = value] { … }
we can use as. Sample:
input[type="text"] {
background-color: gray;}
img[title="Landscape"] {
border: 2px solid green;}
a[target="_blank"] {
text-decoration: underline;}
If the tag name is not specified, it is applied to all tags that have that parameter.
[title="Landscape"] {
border: 2px solid green;}
We can narrow or widen the scope by using different operators instead of equals.
*=Operator
Parameter values specified in the statements ultimately i allows the tag to apply the style to all.
In the example below, the style is applied to all tags that contain "alt" in the class parameter.
[class*="alt"] {
Border-bottom: 2px solid gray; }
~= operator
Makes the specified value apply to tags you pass, separated by spaces.
img[alt ~= "nature"] { … }
In the example above, a style will be applied to images with the word "nature" in their alt parameter. But this word must be whole. For example, does not apply to alt="natures" tags, while alt="wonderful nature" applies to tags.
The |= operator
When using this operator, the parameter must begin with the specified expression and the word must be exactly the same or followed by a hyphen (-) .
For example, the style below will apply to tags to which have “left, top-left, bottom-left” classes. However, names like “leftTop” or “topleft” will not be valid.
[class|="left"] {
Border-left: 2px solid gray; }
^= Operator
The parameter value ensures that it is valid for all tags that begin with the specified expression.
[class^="left"] {
Border-left: 2px solid gray; }
The style in this example will apply to all tags to which have classes with the name “left, left-top, left-bottom, leftTop, leftbottom” etc.
$= operator
The parameter value ensures that it is valid for all tags that end with the specified expression.
[class$="alt"] {
Border-bottom: 2px solid gray; }
Applying Style Differently Based on Parameter Values, style only tags with parameters, style by parameter
EXERCISES
There are no examples related to this subject.
Read 534 times.