This question already has an answer here:
Is there a selector for 2 or more elements with the same attribute value?
(1 answer)
Closed 4 years ago.
With CSS selectors, is it possible to select elements with an attribute value that is the same as the attribute value of another specified element? For example:
<a class="important" href="foo.bar"></a>
will always appear on the page, but the href might be anything. Then further on the page may be something like this:
<li>
</li>
This list again may contain anything but could contain <a> elements with the same href="foo.bar".
I want to be able to select those <a> elements within the list that have an href attribute that matches the href attribute of any <a class="important">
Is this possible with CSS alone? I know this could of course be done in javascript by making sure those specific <a> elements within the list are created with a class attribute, but I'm interested in if there is a purely CSS solution.
yes,
syntax
[{attri}={value}]
like this
.important{
color:#0f0;
}
.important[href="bar.foo"]{
color:#00f;
}
.important[href="bar.bar"]{
color:#f00;
}
Mozilla Documentation - Attribute selectors
Related
This question already has answers here:
How do I style a <select> dropdown with only CSS?
(25 answers)
Closed 5 years ago.
In Css we can genrally style all elements but I noticed that we can not style option element of a select using CSS. As far as I know Option is child element of select then what is possible causes that it don't let you style this element?
I've had reffered various answers on stackoverflow stating that You just can't style option. but I want to know exact reason behind it.
I've had reffered this link which says that option tag is rendered by OS and not by html. If so then why we need to specify option ? why it don't automattically render options.
Here is another link which shows how to style Select tag. But i want to know that why we can't style option? I don't want to know how to style select tag using CSS.
You cannot style the option element because it is rendered by the OS, not HTML. That is why it can't be styled via CSS.
You can of course use some plug-in that replaces select with regular HTML elements that can be styled.
There a duplicate method for this... its correct dropdown not accept the styling so you can make the thing which look like dropdown and give styling to that thing..
Here is the link of this explaination check Answer7
css style on select option
This question already has answers here:
What does a dot before a variable indicate in html?
(4 answers)
Closed 8 years ago.
I am not sure if I understood it correctly. When styling in CSS like this:
body {
}
I'm referring to an element that belongs to HTML. When I write something like this:
.body {
}
I'm referring to a class name given by me. Is this correct?
You may want to have a look at the article on CSS Selectors from MDN, this is also a pretty healthy introductory article on selectors of the type you list, as well as some other important ones.
A non symbol prefixed 'word' denotes an element (body), a 'word' prefixed with a period (.) denotes a 'class' (.body)
Element selectors (called 'type' selectors) only refer to a specific type of element (e.g. body), class selectors can be applied to elements of any type, whereas something like id selectors (a hash preceding a 'word') are unique and can only be applied to a single element (i.e. one id per element, which must not be used elsewhere)
There are many types and combinations of selectors, to get an idea you may also want to read up on CSS specificity
Specificity is the means by which a browser decides which property
values are the most relevant to an element and gets to be applied.
Specificity is only based on the matching rules which are composed of
selectors of different sorts.
Yes.
.body{
}
Would be something like this:
<p class='body'>This is text with a class of body</p>
But can also affect other elements with the class .body.
body{
}
Will affect the body element eg:
<body></body>
You can also use ID's. For example:
#body{
}
And you use this similar to a class. However only 1 ID of the same name per page.
<p id='body'>This is a body tag, but there should only ever be 1 ID per page.</p>
Take a look here for more information.
This question already has answers here:
Why use an attribute selector to match classes?
(2 answers)
Closed 7 years ago.
What does it mean when something between square brackets in CSS? E.g.
input[type="radio"]
It's an attribute selector in CSS
E[foo="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning".
more on http://www.w3.org/TR/CSS2/selector.html
Square brackets are attribute selector syntax.
Your (complete) example means "Select elements of type input which have a type attribute with the value radio" e.g. <input type="radio">
This is an attribute selector. It selects elements that have the specified attribute. You can find out more about them here: https://developer.mozilla.org/en-US/docs/CSS/Attribute_selectors
In your example: input[type="radio"]
This would match an element that looked like this:
<input type='radio'>
The selector you've given in the question means it would need all three words: The element name 'input', the attribute 'type' and the value for that attribute being 'radio'.
Browser compatibilty: This is a standard selector that is available in all browsers in common use. The only browser you may need to worry about that doesn't support it is IE6. See here for compatibility charts for this and other CSS selectors.
Hope that helps.
This is a CSS attribute selector that will only select inputs with the type set to radio, that is, it will select all of the radio buttons.
Here's an article explaining it a bit more.
This question already has answers here:
Is there a css selector for selecting an element futherup in the html?
(4 answers)
Closed 8 years ago.
As the title says -
Here I have a link which contains img tag:
<a href="#">
<img src="somthng.jpg" />
</a>
I have to style this link, there is no class in the image or the link so don't suggest me to add a class. Further I don't want the styling of this link with any other link such as :
<a href="#">
<div>...</div>
</a>
So I'm trying to trigger the link by css a img {...}, but that would style the image not the anchor.
selectors? http://www.w3.org/TR/CSS2/selector.html
You could also use js to target the image file src and then use that to append a class to the link
The only thing you can do in this situation without resorting to javascript is look for anything that all anchors that contain images have in common. Or anything that all anchors that don't contain images have in common. Are they all nested in the same div structure with a specific class? Could you target them like this div#content div.inner div.someArbitraryClass a for example? Could you style all links the way you want them when they're around images and then find a way to override this style for other links, if they all have something in common? Sometimes you have to think outside the box.
... so you have to style the a tag only a {}, if you're using Firebug, get the CSS Path to that a tag, that's the only way you can get to it if at all. Assuming that's doable your like
some tag and another nested tag a{}
If you want to give padding, margin, width or height to link (i.e: a). Don't forgot to apply display-inline-block; to link.
This question already has answers here:
What's the difference between an id and a class?
(17 answers)
Closed 9 years ago.
Where can I use ids and classes? What is the difference between them? Is there any need that we should compulsorily use ids in our CSS?
IDs are meant to be unique, while classes are better for a "type" of element.
So you might have something like:
<ul id="menu">
....
</ul>
Because you will probably only have 1 main menu on your site.
For classes, however, you might have something like:
<span class='author'>Paolo Bergantino</span>
Or perhaps to style the div that contains an answer on this site:
<div class='answer'>....</div>
Because there will be multiple of these per page, they are a class of elements. Think of an ID as the social security number of an element. Whenever an element is important enough and is unique, you give it an ID. This also helps with dynamic websites as selecting elements by ID is by far the fastest way, and if you have multiple elements with the same ID (thus violating this practice) Javascript won't work as intended.
An ID identifies exactly one DOM element, uniquely. A class identifies a group of related DOM elements.
For example, you might have a single, unique nav menu, identified by an ID:
<div id="nav">...</div>
and within it have a number of menu sets, each of which is also uniquely identified and which belongs to a common class:
<div id="nav">
<ul id="content_menu" class="menu">...</ul>
<ul id="contact_menu" class="menu">...</ul>
<ul id="personal_menu" class="menu">...</ul>
</div>
Short and simple:
Classes may be used as many times as needed (and are defined by a period).
Ids can only be used on ONE element (and are defined by a pound).
<style>
.class {
font-size: 3em;
}
#id {
font-size: 3em;
}
</style>
<body>
<span class="class">I am a class</span>
<span class="class">Look at me, also a class</span>
<span id="id">I am special, you can only have one of me or I do not meet XHTML standards</span>
From the w3schools:
The id attribute specifies a unique id
for an HTML element.
The id must be unique within the HTML
document.
The id attribute can be used by a
JavaScript (via the HTML DOM) or by
CSS to make changes or style the
element with the specified id.
and
The class attribute specifies a
classname for an element.
The class attribute is mostly used to
point to a class in a style sheet.
However, it can also be used by a
JavaScript (via the HTML DOM) to make
changes to HTML elements with a
specified class.
The class attribute cannot be used in
the following HTML elements: base,
head, html, meta, param, script,
style, and title.
It is possible to assign multiple
classes to one HTML element, e.g.
.
This allows you to combine several CSS
classes for one HTML element.
While you could use classes for everything, the separation between "classes that only occur once" (i.e. IDs) and "regular classes" is quite useful for keeping your CSS meaningful for yourself.
.menu { ... } /* Err, how many of those did I have? */
#menu { ... } /* Ahh, THE menu. */
An ID refers to a specific element (every ID should never used more than once); a class refers to multiple elements.