I am getting started with learning CSS.
While looking through the tutorial on w3schools.
I realized some of the example start with
.awesome-text-box{}
Is there a different between
.awesome-text-box {} and awesome-text-box{}
without the dot?
What does the dot notation means here
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p referes to ?
A dot in css is for what is called a class.
They can be called almost anything, for example in your CSS you would create a class and add style for it (in this case, I'm making the background black);
.my-first-class {
background-color: #000;
...
}
and to apply this class to an HTML element, you would do the following
<body class="my-first-class">
...
</body>
this would mean the body of the page would become black.
Now, you can create classes for CSS style or you can reference HTML elements directly, for example (CSS again);
body {
background-color: #000;
}
would directly reference the <body> element on the page and do the same again.
The main difference between the two is that CSS classes are reusable. By comparison, referencing the HTML tag directly will affect all tags on the page (that are the same), for example (CSS again);
body {
background-color: #000;
}
.my-first-class {
background-color: #FFF;
}
and now for some HTML;
<body>
<p class="my-first-class">This is the first line</p>
<p class="my-first-class">This is the second line</p>
</body>
This would produce a black page, with 2 white boxes with text inside them (try it out!)
Now for your last part of the question about p.one {...} CSS.
This is a reference to a <p> tag that has class="one" added to it, <p class="one">...</p>
That CSS will only work on a <p> tag with the one class added (as above).
Extra for experts...
There is also one more selector type and it's called an ID (and I personally do not use these when doing CSS styling but some people like too and I don't know why...)
Much like a class, you can have an id on an HTML element; <p id="my-first-id"></p>
and to add CSS style to this, you would put (in the CSS);
#my-first-id {
...
}
and that would style all elements with that id added.
Hopefully that helped answer all the parts, ask again if you need an even better explanation :)
The dot denotes that the selector is a class. So it will select elements in your page as such:
.awesome-text-box {
}
<div class="awesome-text-box"></div>
Whereas without the dot denotes an element name. Such as:
div {
}
<div></div>
In the other example you gave, the dot notation is using chaining this is where you can select an element with numerous conditions. In your example:
p.one {
}
// Will find
<p class="one"></p>
// However it will not find
<div class="one"></div>
Whilst I am here I can give you a list of other common selectors too:
#awesome-text-box => <div id="awesome-text-box"></div> => ID
.btn.btn-style-1 => <span class="btn btn-style-1"></span> => Chaining classes
p > span => <p><span></span></p> => Child
p span => <p><a><span></span></a><span></span> => Descendant (anything below)
p + span => <p></p><span></span> => Sibling
A '.' refers to a class, while a '#' refers to a id.
When neither a '.' or a '#' are used, the CSS will apply the style to an HTML object.
So for p .one and p .two, the CSS will be applied to the '.one' and '.two' classes that exists within the 'p' object.
For a more detailed example;
<p class = "one">This text will have the CSS of "p .one"</p>
<p class = "two">This text will have the CSS of "p .two"</p>
. means a class. You can call that CSS class with HTML
example
<span class="awesome-text-box"> ABCD </span>
and P means <p> tag in HTML you can call
<p class="one"> ABCD </p>
Ref -
http://www.w3schools.com/css/css_selectors.asp
The dot notation is for class and without dot that would not work. The selector name like div, p don't need dot notation. And use hash (#) for the selector with id.
Ex-
<div id="foo">foo bar</div>
<div class="bar">foo bar</div>
#foo{} /* selects foo with id foo */
.bar{} /* selects foo with class bar */
div{} /* selects the div */
Here . is class selector. It means apply style to all elements which has class awesome-text-box ie,
<div class="awesome-text-box"></div>
while without dot it is tag name like you mention in second example p Here p is tag:
<p>Some text</p>
Similarly p.one apply the style to all p tags which has class one. ie,
<p class="one">Some text</p>
Related
I have these elements on the HTML:
<div id="td-status" class="icongb-cancelled"></div>
<div class="ticket-header-text">
<span class="bet-text">TEXT1</span>
<span>TEXT2</span>
</div>
and I want to apply a certain style using LESS to TEXT1 ('bet-text' class) whether its uncle has a cercaion class (in this case icongb-cancelled). I'd like to apply it also to TEXT2 (no class). Would it be possible?
I'm using this code, but it doesn't work:
.icongb_cancelled ~ .ticket-header-text {
& .bet-text {
color: #959595;
}
}
NOTE: I don't want to use JQuery to add or remove any class.
I want to make it just using LESS wihtout any modifying on the HTML.
Thanks in advance.
EDIT: The code was fine, the problem was that I was using an underscore instead of a dash. so you can use that code to apply a style to a nephew element.
You're using .icongb_canceled in the selector, but the class is icongb-canceled.
Dash vs underscore. They need to match.
You can write .icongb-cancelled ~ .ticket-header-text .bet-text, which is valid in CSS, but also is LESS compatible:
.icongb-cancelled ~ .ticket-header-text .bet-text {
color: blue;
}
.icongb-cancelled ~ .ticket-header-text span {
color: green;
}
<div id="td-status" class="icongb-cancelled"></div>
<div class="ticket-header-text">
<span class="bet-text">TEXT1</span>
<span>TEXT2</span>
</div>
I am trying to get the InnerHTML of a the Summary in:
<div><p>
<span class="info">Name:</span>
<p><span>The seven wonders of the mind</span></p>
</p>
<p>
<span class="info>Summary:</span>
<p><span>Wonder throughout your mind in search for the seven wonders.</span></p>
</p></div>
Im having trouble getting the span of the summary part.
I'd start with the following XPath expression:
//div/p[contains(span[#class = 'info'], 'Summary')]/p/span
Let's break it down:
//div
selects all divs in the document.
/p[contains(span[#class = 'info'], 'Summary')]
selects all p children of these divs that have a span child with class "info" containing the text "Summary".
/p/span
selects all span children of all p children of these ps.
If you're sure that the summary is always the last paragraph, you could also use:
//div/p[last()]/p/span
This isn't as robust because it might match other divs as well and it breaks if the summary is not in the last p.
This way:
div p:last-of-type {
#your code here
}
Last tag selection of <p>by jquery.
$( "p" ).last().css( "background-color", "red" );
.
Last tag selection of <p> inside <div> tag by jquery.
$( "p" ).last().css( "background-color", "red" );
.
Add css class to last tag of <div> element.
$( "p span" ).last().addClass( "highlight" );//by this you can connect css to last tag
OR
By Css you can select last element.
p:last-child {
background: #ff0000;
}
Demo
OR
Last <p> tag in side <div> tag.
div p:last-child {
background: #ff0000;
}
How can I specify :first-of-type of the entire document?
I want to style the first <p> of the HTML, no mater where it is located (I don't want to write section p:first-of-type because it may be located elsewhere in a different HTML document).
p {
background:red;
}
p:first-of-type {
background:pink;
}
p:last-of-type {
background:yellow;
}
<body>
<section>
<p>111</p>
<p>222</p>
<p>333</p>
</section>
<p>444</p>
<p>555</p>
</body>
With CSS alone this unfortunately isn't possible. The documentation for the :first-of-type pseudo-class states:
The :first-of-type pseudo-class represents an element that is the first sibling of its type in the list of children of its parent element.
This means that :first-of-type is applied to the first element of its type relative to its parent and not the document's root (or the body element, in this case).
JavaScript solutions
:first-of-type
We can achieve this by introducing some JavaScript. All we need for this is JavaScript's querySelector() method, which pulls the first matching element from the selector specified.
In this example I've altered your :first-of-type pseudo-class to instead be a class of "first-of-type", then used JavaScript to add this class to the element returned when using querySelector('p'):
document.querySelector('p').className += ' first-of-type';
p {
background:red;
}
p.first-of-type {
background: pink;
}
<body>
<section>
<p>111</p>
<p>222</p>
<p>333</p>
</section>
<p>444</p>
<p>555</p>
</body>
:nth-child and :last-of-type
As for :nth-child and :last-of-type, we can instead make use of a similar method JavaScript gives us: querySelectorAll(). This method pulls all matching elements into a NodeList (which is similar to an array), which we can then iterate through or select specific elements from within through the index:
var elems = document.querySelectorAll('p');
// nth-of-type = NodeList[n - 1]
// e.g. to select the 3rd p element ("333"):
if (elems.length >= 2)
elems[2].className += ' nth-of-type';
// last-of-type = NodeList length - 1
if (elems.length)
elems[elems.length - 1].className += ' last-of-type';
p {
background:red;
}
p.nth-of-type {
background: pink;
}
p.last-of-type {
background: yellow;
}
<body>
<section>
<p>111</p>
<p>222</p>
<p>333</p>
</section>
<p>444</p>
<p>555</p>
</body>
Note that I've included if statements around both selectors to ensure the elems NodeList has enough elements, otherwise an error will be thrown.
I need a paragraph to be in red in color?
p .target{color:red;font-size:18px};
.target p{color:red;font-size:18px};
which one work and how it behaves to rendering HTML doc.
p .target{ ... }
... means "apply this style to any element with the class target, which is inside of a <p>".
.target p{ ... }
... means "apply this style to any element which is a <p>, which is inside of an element with class target".
Or in general, any CSS of the form:
parent child { ... }
... will apply the given style to an element of type child, as long as it's within a given parent.
You are talking about 2 different things here.
CSS property is interpreted as parent child { property}
Here in example 1, You look for a node with classname target in the desendant nodes of a p node
<div class="target">
<p>I am in red</p>
</div>
In example 2, you are looking for a p tag in the descendant nodes of class named target
<p>
<span class="target">I am in red now</span>
</p>
I've got a jquery slider function on a page, and when the slide rotates I need the style of a LI tag to change.
So when the slider goes onto a li the class looks like this:
<li class="first sliderkit-selected">
And when it moves off it looks like this:
<li class="first">
But when the class goes to "first sliderkit-selected" I need it to be referenced from the style sheet but not sure how it is constructed, so far I've played around with:
li.sliderkit-selected li.first {
background-color: red;
}
But it doesn't seem to pick it up.
I know you could use a comma inbetween each class, but I want a style to be referenced exclusively when those two class's are together, if that makes any sense.
Thanks.
You're looking for li.sliderit-selected.first:
li.sliderkit-selected.first{
background-color: red;
}
See also:
CSS Selectors Level 3: Class selectors
The following rule matches any P element whose class attribute has been assigned a list of whitespace-separated values that includes both pastoral and marine:
p.pastoral.marine { color: green }
This rule matches when class="pastoral blue aqua marine" but does not match for class="pastoral blue".
To select a DOM element with multiple classes, concatenate the classes in the selector:
li.sliderkit-selected.first {
background-color: red;
}
If you want to select an element with multiple classes, you simply append the classes with a dot, like this:
li.first.sliderkit-selected { /* your rules */ }
This means "a li tag with the class first and the class sliderkit-selected".
You can write like this:
.sliderkit-selected.first {
background-color: red;
}
OR
.first.sliderkit-selected {
background-color: red;
}