I inherited some css and I have searched everywhere online to understand what is being expressed by a block of css that looks like:
[class*=wrapper] .logo {
padding-top: 32px !important;
}
What is the asterisk and square brackets doing?
It is hard to search for [ and * on google... Sorry if the question is dumb.
It selects an element with class logo that has an ancestor that has wrapper somewhere in its class attribute. For example note that the class burgerwrapper also leads to the element being selected below.
[class*=wrapper] .logo {
color: #f99;
}
<div class="logo">Not selected</div>
<div class="wrapper">
<div class="logo">
Selected
</div>
</div>
<div class="burgerwrapper">
<div class="logo">
Selected
</div>
</div>
See http://css-tricks.com/attribute-selectors/ for some background information on attribute selectors.
what square brackets doing
Attribute selectors
CSS 2.1 allows authors to specify rules that match elements which have
certain attributes defined in the source document.
Attribute selectors w3
What is the asterisk
Substring matching attribute selectors
[att*=val] Represents an element with the att attribute whose value
contains at least one instance of the substring "val". If "val" is
the empty string then the selector does not represent anything.
Substring matching attribute selectors
To sum it up in you example:
[class*=wrapper] .logo {
color: red;
}
<div class="wrapper">
<div>not this</div>
<div class="logo">this</div>
<div class="logo">this</div>
</div>
<div>
<div>not this</div>
<div class="logo">not this</div>
<div>not this</div>
</div>
Select child elements with class .logo that their parent element has attribute class with value wrapper appears somewhere in that attribute.
Related
I have div tag for which a data-type attribute is associated. I want to apply different styles depending on data-type is set or no.
<div data-type="type1">Hello, World!</div>
Can I check if this attribute data-type is set or no in css/less ? This question is solved with this.
But, if I apply this data-type attribute only to the parent div, can I use this attribute for all the child div tags as well.
For instance,
<div data-type=`type1`>
<div id="newDiv"> </div>
</div>
In my CSS, I want to apply different styles for #newDiv depending on whatever type (data-type) is set to its parent. I don't want to specify the data-type attribute to the child div as well. How do we do this in CSS ?
You can use :not([data-type]) to select any element that does not have the attribute data-type set regardless of the values used.
Basic working example:
div:not([data-type]) {
color: red;
}
<div data-type="type1">Hello, World!</div>
<div>Hello, World!</div>
Alternatively, you can do the opposite and use [data-type] to select anything with the data-type attribute set regardless of the value
Working example:
div[data-type] {
color: red;
}
<div data-type="type1">Hello, World!</div>
<div>Hello, World!</div>
If you want to target a child div whose parent div has the data-type attribute set the you can use something like this:
div[data-type]>h1 {
color: red;
}
<div data-type="type1">Hello, World!
<h1> How are you?!</h1>
</div>
<hr>
<div>Hello, World!
<h1> How are you?!</h1>
</div>
This also can be reveresed based on your selector preference to target the child elements of parent elements which do not have the data-type attribute set.
div:not([data-type])>h1 {
color: red;
}
<div data-type="type1">Hello, World!
<h1> How are you?!</h1>
</div>
<hr>
<div>Hello, World!
<h1> How are you?!</h1>
</div>
If you have more complex structures you can make use of the wildcard * selector to build selectors that match very broad patterns. The letters represent the depth of the tree on which the element resides with aaa being a direct child and bbb being a grandchild...etc
Basic Example:
[data-type] * h1,
[data-type] h1 {
color: red;
}
<div data-type="type1">
<h1> aaa</h1>
</div>
<hr>
<div>
<h1> aaa</h1>
</div>
<hr>
<div id="test" data-type="type1">
<div>
<h1> bbb</h1>
<div>
<h1> ccc</h1>
</div>
</div>
<h1 class="wow"> aaa</h1>
<div>
<h1 class="wow"> bbb</h1>
</div>
</div>
<hr>
<div id="test">
<h1 class="wow"> aaa</h1>
<div>
<div>
<h1> ddd</h1>
</div>
<h1 class="wow"> ccc</h1>
</div>
</div>
If you find a pattern in your data-type value, yes, you can:
/* 1. Attribute value starts with "type" */
div[data-type^="type"] {
/* Styles */
}
/* 2. Attribute value contains "type" */
div[data-type*="type"] {
/* Styles */
}
Works for: type1, typex, typeaskdasd, etc...
Works for: abctypexyz, typexyz, etc...
I have these codes
<div class="test">
<div class="tag1"></div>
<div class="tag1"></div>
<div class="tag1"></div>
<div class="tag2"></div>
<div class="tag2"></div>
<div class="tag2"></div>
</div>
Now I want to get second child of .tag2 selector.
I try this code and it's not working, but when I use .tag1 it's working.
.test .tag2:nth-child(2) {
background-color: #000;
}
How can i fix this?
:nth-child works on elements, not on other selectors. Here your .tag2 element is the 4th element in the list.
When browsers begin to implement the Selectors Level 4 standards we'll be able to achieve this using the :nth-match structural pseudo-class selector, but unfortunately that's quite a way off yet.
A Potential CSS Solution (Markup-dependant)
If your markup will always be that the first .tag2 will only ever follow .tag1 and the second .tag2 will only ever follow .tag2, you can fake it with this:
.tag1 + .tag2 + .tag2 {
background-color: #000;
}
This selects the .tag2 element which immediately follows a .tag2 element which immediately follows a .tag1 element.
A JavaScript Solution
If you can't do that then you'll have to go for a JavaScript solution instead (or implement something on the back-end which generates the content).
The below example pulls all .tag2 elements within your .test container, then grabs the 2nd one ([1] here, remember the 0 index: [1] = 2nd), then applies the style to that element.
You'll need to add in some checks to ensure this element exists before applying the style.
document.querySelector('.test').querySelectorAll('.tag2')[1].style.background = '#000'
<div class="test">
<div class="tag1">tag1</div>
<div class="tag1">tag1</div>
<div class="tag1">tag1</div>
<div class="tag2">tag2</div>
<div class="tag2">tag2</div>
<div class="tag2">tag2</div>
</div>
I know your question isn't tagged with JavaScript, but a good solution with JS is as follows:
var alltagtwos = document.getElementsByClassName("tag2");
alltagtwos[1].className += " secondel";
.tag2.secondel {
background-color: #000;
color: #fff;
}
<div class="test">
<div class="tag1">tag1 - 1</div>
<div class="tag1">tag1 - 2</div>
<div class="tag1">tag1 - 3</div>
<div class="tag2">tag2 - 1</div>
<div class="tag2">tag2 - 2</div>
<div class="tag2">tag2 - 3</div>
</div>
What I've done here is add all elements with the class .tag2 into an array-like object using getElementsByClassName. I then select the second element which has the class .tag2 (index starts at zero, so I've select [1]) and appended another class to it (.secondel) which I've then styled with CSS.
Why doesn't :not(:last-of-type) work in the following situation? How can I fix it?
JSFiddle: http://jsfiddle.net/C23g6/589/
HTML:
<div class="comment">This is Red</div>
<div class="hello">------------------</div>
<div class="comment">This is Red</div>
<div class="hello">------------------</div>
<div class="comment">Shouldn't be Red</div>
<div class="hello">------------------</div>
CSS:
.comment:not(:last-of-type) {
color: red;
}
As mentioned, the reason is because :last-of-type matches an element that is the last sibling of its element type, in this case div. Since the last div isn't the last .comment, it doesn't match.
Unlike for the first element of a class, there is no way to use pure CSS to match the last element of a class, not even with an override. You should either use information about the existing structure to create a selector that will match the element you're looking for, such as:
.comment:not(:nth-last-child(2))
Or failing that, add an extra class name to the last .comment and exclude that, or otherwise alter the structure itself to accommodate your needs.
if your structure never change , then :
div {
color:red;
}
:nth-last-of-type(2) {
color: black;
}
Would be the simple way to do : DEMO , demo 2
:not() has still limitation.
I passed through this question too, I only created a .last-child class, and set the last element as .last-child. So when I cant do this:
element:not(.las-child){
/*your style*/
}
If your html structure doesn't change, you can use it as the .comment div is always followed by the .hello div.
.comment:nth-last-of-type(n+4) {
color: red;
}
<div class="comment">This is Red</div>
<div class="hello">------------------</div>
<div class="comment">This is Red</div>
<div class="hello">------------------</div>
<div class="comment">Shouldn't be Red</div>
<div class="hello">------------------</div>
"The :nth-last-of-type() CSS pseudo-class matches elements based on
their position among siblings of the same type (tag name), counting
from the end."
In: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type
The html markup may vary as in the following example .menu is illustrated:
<div id="main">
<div></div>
<div class="menu"></div>
<div class="menu"></div>
</div>
for this I could use .menu:last-child but if this is like this:
<div id="main">
<div></div>
<div class="menu"></div>
<div>
<div class="menu"></div> <!--- selecting this----->
</div>
</div>
Or, say like this:
<div id="main">
<div></div>
<div class="menu"></div> <!-- count as 1--->
<div>
<div>
<div class="menu"></div> <!--- selecting this-----> <!-- count as 2 ---->
<div class="menu"></div> <!-- count as 3---->
</div>
</div>
</div>
So, I want to target the .menu whether it is parent, children or siblings anything but lastly marked up html or say like nth-of-type. Is there any idea for this?
I mean I want as the type of the class name.
The nth-of-type will give you the nth sibling of the same type as the selected element.
This should be used when you are dealing with different element types in the same parent, and you want to select the 1st/last or nth element of a specific type only.
Unfortunately there isn't any such pseudo-class to select a specific element(At a particular position) in the sequence of the elements with the same type in the context of the whole BODY of the document. Hence in this particular set of examples you cannot select the 2nd of all the elements with the same specification i.e. in this case with class=menu in the context of the whole document but it is possible with all such elements under a single level of the object hierarchy of the DOM tree i.e. under a single parent.
So the only way is through JS:
Code
<script>
onload=function()
{
obj=document.getElementsByClassName('menu')[1];//index=1 to access the 2nd object
/*
Do something with 'obj'
*/
}
</script>
Would you please explain me the difference between these two CSS classes syntax:
.element .symbol {}
and
.element.large .symbol {}
I don't understand the difference between the two. The first line indicates two different classes to which are applied the same styles. But about the second, what's the meaning of '.large' which is written attached to '.element'?
.element .symbol
means .symbol inside .element
.element.symbol
means .element that has the class symbol as well.
So,
.element.large .symbol
means .symbol inside .element that has the class large as well.
I think you got a slight misunderstanding what the first one means.
.element .symbol {}
Means that those CSS settings are applied to any HTML element with the class .symbol that is inside an element with the class .element.
<div class="element">
<div class="symbol" />
</div>
In this example your first CSS entry would affect the <div> tag in the middle.
Your second example means that the first class requires two classes to be affected. Other than that it's equal to the first one.
<div class="element large">
<div class="symbol" />
</div>
So if the HTML looks like this, the CSS values will be applied to the inner <div> tag as well.
If you want to set CSS tags that apply for multiple classes separately then you need to split them up using a comma. So it looks like this:
.element, .symbol {}
Edit: By request the link to the documentation of the CSS selectors.
Using
.element.large
refers to an element with both classes:
<div class="element large"></div>
rather than a descendant of an element:
.element .large
meaning that in:
<div class="element">
<div class="large"></div>
</div>
only
<div class="large"></div>
is 'receiving' the styles.
Basically, being separated by a space implies two elements with a descendant relationship.
You would use .element .symbol this where you have an element inside of another element. For example:
<div class="element">
<i class="symbol"></i>
</div>
If down the road you wanted to differentiate some divs, you could add an additional class to target only those that differ, and target it with .element.large .symbol. So, for example:
<div class="element large">
<i class="symbol"></i>
</div>
In your second example, the first part of the selector is simply an element with two classes, as in <span class="element large"> or <span class="large element">.
In general, each part of a selector applies to one HTML element.
table[border].clname means a table with a border attribute and a class of clname, while table [border] .clname means an element with class clname, in an element with a border attribute, in a table.
(Edit: well, I say "one HTML element", but of course you can have more than one table that this applies to. You understand.)
Without whitespace, you are simply more specific with the selector. Because classes can appear several times in the html dom. But two or more classes in one element is rarer and therefore more precise.
Selectors with a whitespace (.a1 .b2) say search for the class a1 and see if there is a child or child-child element with the class b2 in this element.
An even higher degree of accuracy can be achieved with the >selector (.a1 .b2 > span). This states that only span elements should be taken into account which are direct children of the class .b2 located within an element with the class a1.
.a1 .b1 {
color: green;
}
.a1.a2 .b1 {
color: red;
}
.a1.a2 .b2 {
font-style: italic;
font-weight: bold;
}
.a1.a2 .b2 > span {
color: orange;
}
<div class="a1">
<div class="b1">Hello France</div>
<div class="b1">Hello Spain</div>
<div class="b2">Hello Sweden</div>
</div>
<hr/>
<div class="a1 a2">
<div class="b1">Bye France</div>
<div class="b1">Bye Spain</div>
<div class="b2">
Bye
<span>World</span>
</div>
</div>