CSS Direct Children Selector

 

Selectors is a core feature of CCS technology. It assist us to define the set of elements to affected a CSS attributes.  One important feature is to understand how to filter elements based in its level in the DOM (Document Object Model).

The name cascading (from CSS – Cascading Style Sheet) is so, because by default a certain rule is applied  to all its children (no matter the level), it is the example for the selector below:  

body table{

    display:none;

}

It will take all tables under body table, no matter if they are direct under body or in some sublevel of the elements tree. However, if the goal is to affect only elements there are direct children form body, it is possible to use the following syntax (>), indicating it should not cascading, but just the first level elements that match the selector.

body > table{

    display:none;

}

A source code of the usage of this selector is available here: https://github.com/rafaelqg/code/blob/main/css_direct_children_selector.html

You may also see a video class about this theme here:



Comments

Post a Comment

Popular posts from this blog

HASHLIB: Using HASH functions MD5 and SHA256

Image
  The usage of hash functions in python is quite simple. Basically we can use the native library hashlib, which give us the possibly to create message digest based on several algorithms, such as MD5 or SHA256. Using this library we may create a hash of some content and then retrieve its binary output or transform that in hexadecimal strings to easy the data transfer in different medias. The library can be imported with the following instruction: import hashlib   If you want to encode strings, it is necessary to encode that with UTF-8, and it can be done using the encode method of a string object: myPassword= "python3.x" myPasswordEncoded=myPassword.encode( 'utf-8' )       The n, the hashlib module has a md5 function which receives as parameter the the we would like to generate the hash. And then return the hash object. hashObject=hashlib.md5(myPasswordEncoded)   The hashObject already contains the ...
Read more

Spread Operator

Image
  The spread operator can be utilized both on arrays and objects. For arrays it will transform the array in a plain list of objects/variables, which can be utilized as input to functions that accept a list of arguments (example: array.push(el1, el2, el3). In This example if we have one array named array01 with options [1,2,3] and we want to add these values to another array, named array02, then we can do array02.push(…array01). Performing that, using the spread operator (…) actually the array02 will have a copy of all elements that are inside array01. Without using the spread operator , for example, array02.push(array01), the array02 will contains one single object that is the array01 itself, and only inside array01 that the values will be found. Another applicability for spread operator is for objects itself. When we want to have a new object with contains a copy of all attributes an existing object already have, in addition to new attributes, we can use the spread operator. L...
Read more

Dart: implementing Object Oriented Programming (OOP)

Image
The object oriented programming provides several benefits for system design. It makes the code easier to maintain, easier to extends, and also implements several well-know design patterns. Using the Dart programing language classes can be simple defined utilizing the class keyword, followed by the class name, and then delimitated the class body with the key brackets {}, like in the example below, presenting one class with two methods. class ProgrammingLanguage {   void compile (){     print( "Compiling..." );   }   void execute (){     print ( "Executing..." );   } } When we need to add new features to this class, it is possible to use the inherence concept, defining a new class that will receive all implementation this ProgrammingLanguage class already has done. And this inherence is done using the extends keywork, like in the example below, which the Dart class has the compile() and the execute() methos from its superclass...
Read more